Responsive problem

Community Forums Forums General Discussion Responsive problem

This topic is: resolved

Tagged: 

This topic contains 5 replies, has 2 voices, and was last updated by  Tony @ AlphaBlossom 10 months, 1 week ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #73078

    spoll
    Participant
    Post count: 42

    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
    #73087

    spoll
    Participant
    Post count: 42

    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.

    #73340

    Tony @ AlphaBlossom
    Participant
    Post count: 542

    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/


    #73341

    Tony @ AlphaBlossom
    Participant
    Post count: 542

    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


    #74010

    spoll
    Participant
    Post count: 42

    Hi Tony-

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

    Thanks-
    Scott

    #74246

    Tony @ AlphaBlossom
    Participant
    Post count: 542

    Hi Scott,

    Glad to hear it helped. Have a great day!

    Tony


Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.