[Resolved] header aspect ratio

[Chad Biggs]

I notice the aspect ratio of the post excerpts changes as the browser size changes. In the header, the width changes but the height does not. Is there a way to make the header act the same way as the post excerpts?

[Tom]

Hi Chad,

It should change the size. Are you talking about your header image?

When you resize, it doesn’t resize?

Let me know 🙂

[Chad Biggs]

Yes I am using am using a background image in the header.  When the browser window is maximized the image would not fit in the header, so I added space to the top and bottom of the header.  Now, everything looks great when the browser window is maximized but when the browser window is not maximized and the size of the window is reduced, the image will reduce but the header does not reduce in height which makes a lot of white space around the image. But the white space is only on the top and bottom.

[Tom]

Ah I understand.

Yea, padding won’t reduce with browser size, so you’ll have to use some CSS here.

@media screen and (max-width: 767px) {
      .site-header .inside-header {
            padding-top: 40px;
            padding-bottom: 40px;
      } 
}

This will adjust the padding to your header when the browser window reaches 767px.

You can change the pixels to whatever break point you like, and can even duplicate these instances with different widths so you can gracefully decrease the spacing inside the header.

Let me know if that helps or not 🙂

[Chad Biggs]

Oh, I just now got what you are saying. Seems weird to have to do that. Would there be any side effects if I changed the padding px to padding percentages? It seems to flow better. I guess one of the downfalls of working on localhost is that you cant test on a cell phone.

[Tom]

You can test on a cell phone if you set your URL to your IP address instead of localhost – that’s what I do.

You can use percentages – they just won’t be completely consistent and exact – but it’s definitely an option.

[Author]

Posts