WordPress.org

Ready to get started?Download WordPress

Forums

Body smaller than header (8 posts)

  1. sunlilly
    Member
    Posted 1 year ago #

    So I've made a custom shaped header where the top is larger than the bottom. Header size 980x705 The body needs to be at 912 - is this possible. Here is an example of what I need it to look like.
    http://prophotoblogs.com/store/charming-boudoir/

    I've tried
    .one-column #page {
    max-width: 912px;
    }
    #page {
    margin: 2em auto;
    max-width: 912px;
    }
    in my Child theme and nothing. I've tried min-width also. I can make the header smaller than the body, but just can't make the body smaller than the header.
    Maybe I'm way off and it's a simple solution.
    PLEASE HELP

  2. alchymyth
    Forum Moderator
    Posted 1 year ago #

    #page is wrapping everything including the header; therefore your styles won't have the desired effect.

    you possibly need to restrict the width of #main but that is difficult to say for sure, without a link to your site.

  3. sunlilly
    Member
    Posted 1 year ago #

    I'm doing everything on my local before going live. I will take a look at the
    #main, but I'm pretty sure I tried
    #page {
    background:transparent;
    }
    #main,#primary {
    background:#FFF;
    width:912px;
    }
    #access {
    margin-bottom:0;
    }

    I just redesigned my header and will play with the coding later.
    Thanks

  4. danny_getextra
    Member
    Posted 1 year ago #

    Right what you need to do if this makes sense is:

    Have a overally container which is the body set the width to 100%

    then have the header as a seperate div. then another container to hold the other things.

  5. sunlilly
    Member
    Posted 1 year ago #

    ok this is what i changed

    #page {
    background:transparent;
    }
    #main,#primary {
    background:#FFF;
    width:912px;
    }
    #access {
    margin-bottom:0;
    }
    #branding { border-top: none; } /*remove the grey border at the top*/

    /* One column */
    .one-column #page {
    max-width: 980px;
    }

    #page {
    margin: 0em auto;
    max-width: 980px;
    }

    Here's the link, It's live. The body did reduce to the left, but the menu and foot stays the same width.
    http://boudoirtreschic.com/

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    If you don't receive further help, try a more relevant forum such as CSS Creator, as your issue seems to lack WordPress involvement.

  7. sunlilly
    Member
    Posted 1 year ago #

    Well as for now, I'm just going to load the redesigned header to fit the layout and play with it on the local server.

  8. alchymyth
    Forum Moderator
    Posted 1 year ago #

    instead of:

    #main,#primary {
    background:#FFF;
    width:912px;
    }

    try:

    #primary {
    background:#FFF;
    }
    #main, #access, #colophon {
    	background:#FFF;
    	width: 92.8%;	margin: 0 4.1%;
    }

    make sure to adjust the width in the menu #access styles furher down in the stylesheet...

    try not to use fixed widths in the otherwise flexible/responsive styles.

Topic Closed

This topic has been closed to new replies.

About this Topic