Hi resolution screens + full width template

Hi,

I am using full width templates with full width hero images on my website. It is working very well up to some resolutions, but with bigger screen, (with resolution 1920x1440 and bigger) the aspect ration of my images is too stretched, so full width images become cropped from top and bottom drastically.

Is there any solution to this behaviour, maybe setting up a maximum width for the images or minimum height, so they dont get cropped?

Here is the link:

Thank you for any suggestions!

Hi @pablo102,

Thank you for writing in, if we put a max-width on the image there will be empty space on the side of it on some screen sizes, let’s have the min-height instead.

Add this inline CSS to your section’s STYLE field.

min-height: calc(100vh - 151px);

Fun with Viewport Units

Hope it helps,
Cheers!

Thank you, that works perfectly!

You are most welcome. :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.