CSS Help

This topic is: not resolved

This topic contains 6 replies, has 5 voices, and was last updated by  RonnyMac 1 year, 7 months ago.

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

    charriott4
    Participant
    Post count: 58

    http://avance2.myprowebsolutions.com/

    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

    #13251

    TishaOehmen
    Participant
    Post count: 15

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


    Tisha Oehmen, Paradux Media Group
    Twitter: @TishaOehmen

    #13289

    RonnyMac
    Participant
    Post count: 61

    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?


    #13295

    Joseph Lee
    Participant
    Post count: 136

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

    #13298

    RonnyMac
    Participant
    Post count: 61

    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?


    #13327

    bandj
    Participant
    Post count: 163

    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.


    #13379

    RonnyMac
    Participant
    Post count: 61

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

    Thanks!!


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

You must be logged in to reply to this topic.