My structural wraps are neither structured nor wrapping

Community Forums Forums Design Tips and Tricks My structural wraps are neither structured nor wrapping

This topic is: resolved

This topic contains 6 replies, has 3 voices, and was last updated by  Dorian Speed 1 year, 1 month ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #51876

    Dorian Speed
    Participant
    Post count: 140

    As far as WHY I am doing this, it’s because the client didn’t want the “extra” mobile responsiveness and, in my head, I thought, “oh, okay, that will be easy to remove.”

    FAMOUS LAST THOUGHTS.

    Then I decided I want the sleek, full-width look for the backgrounds of the menu, footer widgets, and footer. I have tried many different things. Here is the site: http://fulwilerlaw.wpengine.com

    I’m working from the basic child theme. I removed the media queries and changed all of the percentages to pixels. I added structural support for wraps to the functions.php file.

    I removed the width from the overall #wrap div and added it to the individual elements. Snippets:

    #nav {
    background: #ecdc95;
    border-bottom: 2px solid #d3c99c;
    border-top: 2px solid #d3c99c;
    }

    .genesis-nav-menu.menu-primary,
    .genesis-nav-menu.menu-secondary {
    margin: auto;
    width: 1152px;
    }

    #footer-widgets {
    background: #fefbec;
    border-top: 2px solid #ecdc95;
    clear: both;
    font-family: "myriad-pro", sans-serif;
    font-size: 12px;
    line-height: 1.5;
    overflow: hidden;
    padding: 32px 0 16px;
    padding: 2rem 0 1rem;
    }

    #footer-widgets .wrap {
    margin: 0 auto;
    width: 1152px;
    }

    #footer {
    background: #948a63;
    border-top: 2px solid #530000;
    clear: both;
    font-family: "myriad-pro", sans-serif;
    font-weight: 400;
    margin: auto;
    overflow: hidden;
    padding: 24px 0;
    padding: 1.5rem 0;
    }

    #footer .wrap {
    margin: 0 auto;
    width: 1152px;
    }

    It looks fine on the desktop. On a small screen, the following happens.

    On the navigation, the background gets cut off partway across the screen but the content is still displayed.

    On the footer widgets and the footer, both the background AND the content get cut off partway across the screen.

    I’m thinking it has something to do with the structural wraps, because when I look at it with Chrome Developer tools, it shows the .wrap for both the footer-widgets and the footer as having a height of 0px and being “above” the actual footer. So…I have no idea what’s going on.

    Any help appreciated!


    Bringing websites Up to Speed
    Firebug will light the way to understanding the secrets of the Internet!

    • This topic was modified 1 year, 1 month ago by  Dorian Speed.
    • This topic was modified 1 year, 1 month ago by  Dorian Speed.
    http://fulwilerlaw.wpengine.com
    #51886

    Robin
    Participant
    Post count: 318

    I don’t know if it will fix the issue you’re having, but on an older SP site I did, all of the wraps have a height: ###px in addition to the width and margin. So I’d guess that maybe adding that will make the wraps show, but if it will fix the small screen thing, who knows?

    Maybe also try adding margin: 0 auto; to the #footer-widgets, not just the wrap. Even though that one is full width, it may still make a difference. (I’m wondering if the area is “falling off” the smaller screens somehow?)


    I do the best I can with what I’ve got. (say hey on twitter)

    #51898

    Dorian Speed
    Participant
    Post count: 140

    Thanks – yeah, I tried those suggestions and the Internet still hates me, so I’m not sure what else to do. It feels like what happens is that the site sets the width of these elements as the same as the viewport, so if you zoom back out, it’s cut those off at that point.


    Bringing websites Up to Speed
    Firebug will light the way to understanding the secrets of the Internet!

    #51900

    Robin
    Participant
    Post count: 318

    If it isn’t responsive, though, do you want to add the viewport tag in functions? Try removing that? (It’s not in the older themes either)


    I do the best I can with what I’ve got. (say hey on twitter)

    #51902

    Dorian Speed
    Participant
    Post count: 140

    Oh, forgot to add that – yeah, I tried it with AND without the viewport tag. No difference. Sad trombone.


    Bringing websites Up to Speed
    Firebug will light the way to understanding the secrets of the Internet!

    #51939

    Tony @ AlphaBlossom
    Participant
    Post count: 537

    Hello,

    Did you get this resolved? I took a look and I’m not seeing the nav or widget area cut off (looked on desktop and ipad).


    #51950

    Dorian Speed
    Participant
    Post count: 140

    Yes! Gary Jones, WordPress super genius, helped me out. I needed a min-width.

    .wrap {
    margin: 0 auto;
    width: 1152px;
    }

    #wrap {
    background: url(images/bg.png) repeat-x transparent;
    margin: 0 auto;
    min-width: 1152px;
    }

    Thanks for everyone’s assistance!


    Bringing websites Up to Speed
    Firebug will light the way to understanding the secrets of the Internet!

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

You must be logged in to reply to this topic.