Shopify themes, liquid, logos, and UX
Hi, how can I make this image a square at all resolutions? I want it to scale as I adjust the store's width in F12, but it should always remain a square. I don’t want to change its resolution, just ensure it maintains a square shape in every position.
Here’s a store where it works the way I want: https://tomnoske.store/
And here’s my store: https://1049xn-ya.myshopify.com/
Thanks a lot,
Tim
Yes follow the below instructions:
1) Go to your theme's code
2) Open the 'base.css' file
3) At the bottom of the file paste the below code
.section-template--22711083729161__image_with_text_ejW6Nw-padding .image-with-text__media img{
height: auto !important;
aspect-ratio: 1 / 1;
}
Hey, that doesn’t work. When I check it using F12 and hover over the image, it shows that it’s a square, but it actually isn’t.
Only when the store width is 749px+ it works normally.
See the photo below:
How can I fix this?
I want it to work exactly like on this store: https://tomnoske.store/
.section-template--22711083729161__image_with_text_ejW6Nw-padding .image-with-text__media > img {
aspect-ratio: 1 / 1;
height: auto !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
I hope it helps
Best,
Daisy
Hey, that doesn’t work. When I check it using F12 and hover over the image, it shows that it’s a square, but it actually isn’t.
Only when the store width is 749px+ it works normally.
See the photo below:
How can I fix this?
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025