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?
In Canada, payment processors, like those that provide payment processing services t...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025