Community Forums › Forums › Archived Forums › Design Tips and Tricks › My structural wraps are neither structured nor wrapping
Tagged: structural wraps
- This topic has 6 replies, 3 voices, and was last updated 10 years, 9 months ago by Dorian Speed.
-
AuthorPosts
-
July 22, 2013 at 12:47 pm #51876Dorian SpeedMember
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!July 22, 2013 at 1:19 pm #51886RobinMemberI 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)
July 22, 2013 at 1:56 pm #51898Dorian SpeedMemberThanks - 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!July 22, 2013 at 2:03 pm #51900RobinMemberIf 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)
July 22, 2013 at 2:07 pm #51902Dorian SpeedMemberOh, 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!July 22, 2013 at 4:53 pm #51939Tony @ AlphaBlossomMemberHello,
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).
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
July 22, 2013 at 5:19 pm #51950Dorian SpeedMemberYes! 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! -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.