Full screen width header – Twenty Eleven

  • Resolved aleksandrarocks

    (@aleksandrarocks)


    11 years, 6 months ago

    Hello,

    I am fairly new to this and seem to be having very tough time figuring out how to stretch the header image to full width (of any screen size). I played with the header size but that didn’t work. Basically if you go to www.ads-software.com and see the black header at the top, well I want to make my blog look like that. The blog is oneearth.iamaleksandra.com.

    If you are going to suggest things please try to give me step by step instructions and use less lingo – I am really new so it would help.

    I am using Twenty Eleven, child theme.

    Thanks!!!

Viewing 5 replies - 1 through 5 (of 5 total)

  • This CSS will do:

    body {
    padding: 0;
    }

    but now your too wide sidebar widget is off screen

    Thread Starter aleksandrarocks

    (@aleksandrarocks)

    Oh no way that did work!! Thanks so much! I can definitely decrease the side bar now – let’s see…

    Could you explain why it worked? So I know in future and it doesn’t feel arbitrary. Thanks again!

    Aleksa

    Thread Starter aleksandrarocks

    (@aleksandrarocks)

    Alas, victory!! Thanks!

    Aleksa

    You already had a ‘full screen’ width setup in CSS.
    The first part (container) is the <body>, this had horizontal padding:

    body {
padding: 0 2em;
}

    In the above scenario, using two values, the first are vertical padding, the second horizontal padding.

    When we use just one value, it is applied to all: Top, Right, Bottom, Left.

    So what you did was remove the horizontal padding from the body element.

    Thread Starter aleksandrarocks

    (@aleksandrarocks)

    Big thanks Seacoast Web Design!!!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Full screen width header – Twenty Eleven’ is closed to new replies.