Maybe you heard about the aspect ratio property. This is a handy tool for mainly setting up image scales. But first, let’s come to some explaining the problem.

There are (again) various browsers on the market, and your users decide which one to use to visit your site or online store. Considering this you can keep it simple, stupid, something like, buy and leave, and come back with the next voucher we will send you. Or you can try to attract your user also visually, which is from a developer’s perspective more complicated but definitely more fun. Combining the KISS method with a visually attractive layout is also often more buggy than just putting things in plain on the web.

Take for example the 3close homepage, which comes with this rolling cube and some important information in the footer section. As the cube is rolling and rolling the footer has to be visible which is normally by

footer {position: fixed}

guaranteed. If the HTML of your website document has a transition, the position of the desired element, in this case the footer section, might be different in some browsers. In the Firefox Mobile Browser for example the footer renders behind the bottom bar of the browser as you can see here:

this occurs in the portrait view. So “fixed” could be hidden in some cases. But how to fix? There are various solutions proposed. In my case, none of them worked out as desired. Just to make the footer section fixed, made the footer disappear in the landscape mode in a whole:

There are also some great articles on the web regarding this problem.

The

footer {position: absolute}

had the same effect in the landscape mode.

So I tried some neat stuff, as you can consider from this article’s headline. There is the aspect-ratio CSS property, which you can use in the most modern browsers.

@media (max-aspect-ratio: 9/16) 
{footer {position: absolute !important}
}

@media (min-aspect-ratio: 9/16) 
{footer {position: fixed !important}
}

This respects the aspect-ratio of the portrait modes in the common mobile browsers and also the switch to the landscape view with two simple media queries. But be aware of the order to make this work and not overwrite itself. You can also use this small calculator to try a bit for yourself, or just contact me.

Featured image comes from pexels.