Support » Themes and Templates » Body smaller than header

  • So I’ve made a custom shaped header where the top is larger than the bottom. Header size 980×705 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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Michael

    (@alchymyth)

    Forum Moderator

    #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.

    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

    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.

    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/

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

    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.

    Michael

    (@alchymyth)

    Forum Moderator

    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.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Body smaller than header’ is closed to new replies.