Firefox ignoring section heights

Support
#1

I have specified a row height for a section (a few actually) and it looks fine in Safari and Chrome, but in Firefox, it doesn’t seem to fix the height at all.

This is the page.
http://77.104.134.143/~sunnyda3/fieldgateflowers.co.uk/

It should be fixed at a minimum of 800px.

Can you help?

Thanks,
Loren

#2

Hi Loren,

On my end the pages look 100% the same on Chrome and FireFox

Can you please clear FireFox Browser cache and test it again?

Thank you

#3

Hi.
Chrome is okay now, but Firefox is still ignoring the height.

#4

Hey there,

That’s an issue with Firefox https://stackoverflow.com/questions/14053206/css-min-height-not-working-on-mozilla-firefox, you should replace min-height: 600px with height: 600px and use height: auto for smaller screens.

Hope this helps!

#5

Hi. I’ve replaced the min-height for height and its fine now but I’m having trouble getting the media query right for smaller screens. I’ve added this,

@media only screen and (max-device-width: 480px) {
    .fade {
        height: auto;
    }
}

but its not working. .fade is the id I’ve given to the row.

#6

Try

@media only screen and (max-width: 480px)

#7

I tried that already. Doesn’t work.

#8

Hey there,

Try this code instead:

@media screen and (max-width: 480px) {
    #fade {
        height: auto !important;
    }
}

Let us know how this goes!