Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] header aspect ratio

Home Forums Support header aspect ratio

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #35642
    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?

    #35727
    Tom
    Lead Developer
    Lead Developer

    Hi Chad,

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

    When you resize, it doesn’t resize?

    Let me know 🙂

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

    #35989
    Tom
    Lead Developer
    Lead Developer

    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 🙂

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

    #39132
    Tom
    Lead Developer
    Lead Developer

    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.