Responsive problem

[spoll]

I was working on this today and everything was as it should be. I decided to check it tonight on 2 cellphones and the header and nav are completely messed up and staying to the left. On my computer screen it's dead center. I deleted and reinstalled Genesis Responsive header thinking maybe that was the cause but no luck.

Can someone please help me out here?

Thanks-
Scott

http://www.scabsbandages.com

[spoll]

I made an adjustment but now it's just that there's a large amount of space to the right. Normally that's the correct responsive layout without anything to the right.

[Tony @ AlphaBlossom]

Hello,

I think your two biggest problems are:

.after-content-ad (around line 888)

and

.header-full-width #title-area,
.header-full-width #title,
.header-full-width #title a (around line 255)

are both set to width: 960px;

You should change them to 100%, and set your padding-left and padding-right to 0. You might have to tweak that a little if you need the side padding...there's several different ways to do it. I would probably do it like this:

#header > .wrap {
   width: 94%;
   padding: 0 3%;
}

You can change those to anything, just make sure they add up to 100%.

The last problem I saw with your structure is the #nav. It's set to 100%, but the padding (left and right) is causing it to go over that.

I would change your #nav style to:

#nav {
   width: 94%;
   padding-left: 3%;
   padding-right:3%;
}

These changes will take care of your issue with everything way to the left, and also completely eliminate the horizonal scroll bar at smaller resolutions.

I recommend looking at box-sizing for all or some of your site when doing responsive. It will not factor padding and borders into the with, so if you set the width to 100%, the padding will not add to that but will apply inside of the 100%...it will make your life much easier 🙂

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[Tony @ AlphaBlossom]

One more thing I noticed (only looked at your home page)...your #content is also set for 100% width plus left and right padding, so it's going over the 100% width. Same as above, you'll have to either apply the box-sizing from the link above, or adjust it so your width + left-padding + right-padding = 100%;

Have a great weekend!

Tony

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[spoll]

Hi Tony-

I played around with this approach and I think it worked great, very simple as well.

Thanks-
Scott

[Tony @ AlphaBlossom]

Hi Scott,

Glad to hear it helped. Have a great day!

Tony

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[Author]

Posts