January 7, 2013 at 2:34 pm #10172
Can anyone point me in the right direction on how to position the content of the page to center?
I repositioned the wraps so I can have full a width background on the #inner section but have been trying for 2 days to figure this out while still making sure its responsive and that it will work on all page layouts.
January 20, 2013 at 1:14 am #13251
TishaOehmenParticipantJanuary 20, 2013 at 11:23 am #13289
Maybe I'm missing something or copied and pasted incorrectly but I can't see that the Full Width snippet in GenesisTutorials does anything in functions.php.
In the Genesis 1.9.1 Child theme, each region-- header, nav, subnav, inner, foot-widgets, and footer-- have an inner #wrap already. And all the regions are wrapped in the body #wrap.
If the width of the body #wrap is set to 100% then the inner regions have no margin. Setting the inner regions to width: 1152px; and margin: 0 auto; seems to work, while giving the body #wrap a width of 100%.
If that tutorial snippet does anything in functions.php I can't see it. What am I missing?
January 20, 2013 at 12:07 pm #13295
You are correct in the use of
Margin: 0 auto;
It is centered right now. The problem is you need to apply a width. Right now the width of the #inner is not defined. It's basically 100% of the page. If you write width: 960 px; under #inner then the page will center under the navigation.
I think this is what you are asking. I apologize if I misunderstood you. Please let me know if I am incorrect and I will assist you furtherJanuary 20, 2013 at 12:22 pm #13298
OK, I see it. Finally. It's too early in the day.
This provides another .wrap inside the #inner, which can be useful. How does one put a full width header-only background color without another wrap?
I can set the #wrap to 100%, then set each region to a width of 1152px, but any color background in the #header remains at 1152px. So, is it best to set the #wrap and #header at 100% width, then center the inner .wrap?
January 20, 2013 at 3:26 pm #13327
You set the divs like #header, #nav, #subnav etc to 100% and give the .wrap the width you want. The wraps are inside the divs so you could try
#header, #nav, #subnav, #inner, #footer-widgets, #footer width to 100%
then set #header .wrap, #nav .wrap etc to whatever width you want.
January 20, 2013 at 7:54 pm #13379
You must be logged in to reply to this topic.