Scaling of images for mobile

Sorry, one more! I have a section with an image on the right and text on the left. When I view on Mobile I see that the image doesn’t stay 100% of the height of the section… and stretched by the test that stays taller. Is this just a flexbox min height or something? See the sample link below.

Thanks!

Hi Richard,

Thank you for writing in, no that is not about flexbox. That is just the image being responsive while keeping its aspect ratio.

There are 2 workarounds for that, first is to swap a different resolution image that fits with the column on that certain viewport size using the Hide During Breakpoints option. Second is to apply the image as a background, but as you might already know the background-size: cover; property will cut that image on certain screen size, so if you want to keep the focus on the background-image on the woman you need to set the background-position to center right;

background-size
background-position

Hope it helps,
Cheers!

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