How can I set an image to always be a square

How can I set an image to always be a square

CreatorTim
Trailblazer
408 1 55

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.

CreatorTim_0-1737836663901.png

 

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

Replies 4 (4)

WalkYourStyle
Navigator
473 57 78

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;
}
CreatorTim
Trailblazer
408 1 55

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:

CreatorTim_0-1737890135072.png

 

How can I fix this?

 

I want it to work exactly like on this store: https://tomnoske.store/

DaisyVo
Shopify Partner
3794 412 499

 

To complete your requests, please follow these steps:
  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.

 

.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;
}

 

Here is the result: image_720.png

 

I hope it helps 

 

Best,

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
CreatorTim
Trailblazer
408 1 55

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:

CreatorTim_1-1737890489427.png

 

How can I fix this?

 

I want it to work exactly like on this store: https://tomnoske.store/

 

Thnak you!