100vh not showing in Firefox

[nblund]

Hi there.

At mohocon.com I have styled the front page first section with min-height: 100vh;
While this works smoothly in other browsers it doesn’t show in Firefox. See attached images.
What to do?

Thanks

Thanks.

[jumar]

Hello @nblund,

Thanks for writing in!

It’s a common bug in Mozilla Firefox for the older versions. Here’s a bug report about this: https://bugzilla.mozilla.org/show_bug.cgi?id=1221721

It’s however fixed using the latest version.

I suggest you download and install it: https://www.mozilla.org/en-US/firefox/new/

Hope this helps.

[nblund]

Hi there. Thanks. I do have the newest version of Firefox installed. The issue remains, however. The thing is that I have multiple sections with min-height: 100vh; yet only the top section on the front page behaves unexpectedly. What can I do about it? Thanks.

[nico]

Hi @nblund,

I have checked your setup on my side and it is working well. Please try to reinstall your mozilla firefox and purge all cache in your site.

Let us know how it goes.

Thanks.

[nblund]

Hi,

Strange. The issue remains on my side despite complete reinstallation of Firefox and purge of cache…

[thai]

Hi There,

Please try adding the display: block inline CSS to the container of your section:

Let us know how it goes!

[nblund]

Hi again,

Nope, that didn’t make it. I have added ‘min-height: 100vh;’ to both the section and the row. Adding ‘display:block;’ actually brakes the style somehow.

Thanks.

[paul.r]

Hi,

I can replicate this issue on my end as well.

Can you try turning off marginless column

Then add margin-right:0; as inline css to your columns.

[nblund]

Hi. Unfortunately, that didn’t change anything? Other ideas? Thanks.

[friech]

Hi There,

I see that you added a min-height:100vh to the ROW. Please add it as a height: 100vh instead.

Thanks,

[nblund]

Excellent. That did it. So, is there a rule like that - why was min-height: 100vh; for the row not right? Thanks.

[friech]

Glad to hear that sort things out, it seems to be an ongoing bug in Firefox where min-width/min-height/max-width/max-height does not work for display: table divs.

When you set your ROW to have a Marginless Columns, it will have display: table property.

Cheers!