Incorrect Header Height

  • Resolved breecrowder

    (@breecrowder)


    9 years, 6 months ago

    As you can see on this page, my typewriter is slightly being overlapped by the nav and my blog posts. I have adjusted the height of Pictorico’s header with CSS, but for whatever reason, it isn’t adjusting to the exact height of this header. I have verified the exact height, and it is 220px.

    The CSS I’m currently using:

    .flexslider .hentry {
    height: 220px;
}

    Any help is appreciated! Thanks.

Viewing 1 replies (of 1 total)
  • Chad Chadbourne

    (@shireling)

    9 years, 6 months ago

    Hi @breecrowder!

    Two approaches to solve this 🙂

    One: use a wider image. Pictorico’s header is set up to cover the available space, so the theme scales the image until the entire header area is filled. With your current image, when the image is wide enough to fill most computer screens, it becomes to tall.

    A wider image (wider than most screens) would end up filling the the space vertically first, and all that would get cut off is extra whitespace on either side.

    Two: CSS!

    We can set the header image to contain instead of cover.

    The drawback is that this will sometimes leave empty black bars on either side or above/below the header, BUT – you have a nice, white background to your image, so we can site the site background to match!

    Try this CSS:

    .header-image {
   background-size: contain;
}

.entry-header {
   background-color: white;
}

    Let me know how it goes!

    • This reply was modified 9 years, 5 months ago by Kathryn Presner. Reason: fixed closing code tag
Viewing 1 replies (of 1 total)

The topic ‘Incorrect Header Height’ is closed to new replies.