Logo Height not responsive

Question

The "rh" logo on my site is responsive vertically, ie fits perfectly to a tall thin window, but does not resize to a wide short window. Could anyone help me make the logo responsive to both width and height?

here is the website... (takes a bit to load up)

http://rhwebdesign.co.uk/

Here is my CSS:

img { 
    height: auto; 
    max-width: 100%; 
    vertical-align: middle;
}

Answer 1

It looks like in landscape mode (480x320), there is a script not calculating the size of margin correctly.

<div class="container hero-content" style="margin-top: -97.5px;">

have a look in main.js for this function:

heroContent.css({
            "margin-top" : topContentMargin+"px"
        });

Which is this:

topContentMargin = (heroHeight - contentHeight) / 2,
heroHeight = windowHeight,
contentHeight = heroContent.height(),

I haven't really looked into why it is calulating it incorrectly. My guess is that heroContent is too high for landscape mode because the image becomes 441px high with the media query max-width:100%. So it tries to add a negative margin to compensate.

My advice would be to remove the jQuery calculation of the hero content sizing and apply sizes using css and media queries only.

Edit:

You need to be more specific with your css. Learn some more about css specifity . You should include your largest media queries at the top, so the smaller ones will take precedence at the bottom. Makes things easier. Also IMHO, I wouldn't use queries for anything larger than iPad. ie. 1024px. Although you should always test on newer devices if possible.

You will need to specify the height of the video for each specific device size. I can't tell now, but maybe jquery was determining the section heights, so now the css is determining the video height.

So at the bottom of your style sheet, try this.

div#bgVideo.skrollable.skrollable-between video#video_background {
    min-height:940px !important;
}

@media (max-width: 480px) {
.hero-logo img {
    max-width:55%; /*looks nice at 480 */
    padding:20px;
    }
div#bgVideo.skrollable.skrollable-between video#video_background {
    min-height:320px !important;
    }
}

@media (max-width: 320px) {
div#bgVideo.skrollable.skrollable-between video#video_background {
        min-height:480px !important;
    }
}

But Richard, to be honest, you should be troubleshooting and testing the design yourself. How will you ever learn if you don't try. Remember, firebug is your best friend :)

Answer 2

To be very specific and address your questions about the logo, consider setting the max-height relative to the window's height.

You have:

img { 
    height: auto; 
    max-width: 100%; 
    vertical-align: middle;
}

.hero-logo img {
    max-width: 100%;
    min-height: 100%;
    padding: 20px;
}

In order to scale the logo, add in to the latter block:

max-height: 100vh;

This sets the images maximum height to 100% of the viewport height, which appears to be what you desire here. Note that there is some text beneath it, which is not displayed, since it is text wrapped in an H5. These two lines are 68px tall (40px padding plus 28px for the text). So, you can adjust the above to:

max-height: calc(100vh - 68px);