CSS Help

This topic is: not resolved

This topic contains 6 replies, has 5 voices, and was last updated by  RonnyMac 2 years, 10 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #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.

    Web Designs By Chrissy | Twitter @designbychrissy

    Follow Me On Facebook



    Check out this tutorial: http://genesistutorials.com/genesis-structural-wraps-creating-a-full-width-genesis-child-theme/

    Tisha Oehmen, Paradux Media Group
    Twitter: @TishaOehmen



    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?


    Joseph Lee

    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 further :)



    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?



    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.



    Yep, that does it. Perfectly. A bit convoluted but easy enough.


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

You must be logged in to reply to this topic.