Shopify themes, liquid, logos, and UX
What is the best way to keep images from stretching to absurd lengths on bigger screens (currently using a 27" display". )
For example, if I condense the window size my images are working perfectly.
But when I set my browser to full screen it just stretches it like this.
How can I fix this? Thanks
I guess what I should say is, stretch the image without directly affecting the height of it.
I figured out that the image stretches because object fit: cover (in main.css under img{}), which correctly resizes the image with the size of the screen, but in turn, zooms the image in like the 2nd photo. If you tick it off you will keep the same height and instead just stretch the image to fit the screen width.
I guess my new question is how do I make images look less stretched if I do so. Is there a better way at tackling this problem?
Well it depends on what your theme allows.
I guess you're limiting the section height? Using the "Adapt to image" will make your banner grow without stretching. However, on an ultrawide monitor it may result in a banner being taller than screen 😞
Since you have a carousel, I'd consider switching to showing 2 slides side-by-side on very wide monitors.
I have the same issue!!! What was the outcome please?
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...
By Jacqui Sep 6, 2024