Firefox Ignores Min-Height CSS

Updated On
13-Jan-2020
By
Liz Jamieson

I'm using Oxygen Builder to build this website. I used to use Genesis for all my websites, but after Gutenberg arrived it felt like WordPress themes would eventually die out, so I turned my attention to Oxygen. Oxygen doesn't use a theme so seemed to fit with my general feeling about where things were going in WordPress world.

In Oxygen you design templates to run against certain post types. For the blog post type, I wanted a hero image - of an image of mountains - in black and white at the top of each blog post. On top of this I added a gradient using the site's accent colour to overlay the hero image on its right hand side.

If it's working you should be able to see what I've described at the top of this post.

To achieve this I created a section with a min-height of 300px, and then applied a background image with gradient. But setting the height or the min-height of the container section to 300px did not work in Firefox. You have to add overflow:hidden as well.

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram