Resize multirow images

Solved

Resize multirow images

Karla8
Explorer
57 0 13

hello all,

 

I've been trying to resize the images of the multirow to be square without success. The size changes on different screens, and I would like to keep it always square so that the full image is visible.

 

My website is www.hintofhappiness.com

 

Thanks in advance for your help !

Karla

Accepted Solution (1)

DaisyVo
Shopify Partner
3793 412 499

This is an accepted solution.

Hi @Karla8 

 

I hope you are well. You can follow our instructions below:


1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for "theme.liquid" file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for </head> tag and add the following code above </head> tag: https://prnt.sc/KWtKYyZkDtYJ

 

Here is the code for Step 3:

 

{% style %}

.multirow .multirow__inner.page-width .image-with-text img { 
aspect-ratio: 1 / 1 !important; 
height: auto !important; 
top: 50% !important;
transform: translateY(-50%);
}
{% endstyle %}

DaisyVo_0-1738342082884.png

 

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

View solution in original post

Replies 4 (4)

PritTala
Tourist
27 2 4

Hello @Karla8  
Can You Please Explain More In Which Section You Want To Change Images And Which Type Of Changes You Want.

Worked for you? Like and accept the solution!

Prit Tala - Shopify Developer
Contact: Prittala2111@gmail.com
Karla8
Explorer
57 0 13

Hello,

 

In the home page, I have a multirow with text and image. The images are rectangular and on bigger screens it's even more so I can hardly see the pictures. I would like to keep it square.

 

Thanks in advance for your help !

 

DaisyVo
Shopify Partner
3793 412 499

This is an accepted solution.

Hi @Karla8 

 

I hope you are well. You can follow our instructions below:


1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for "theme.liquid" file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for </head> tag and add the following code above </head> tag: https://prnt.sc/KWtKYyZkDtYJ

 

Here is the code for Step 3:

 

{% style %}

.multirow .multirow__inner.page-width .image-with-text img { 
aspect-ratio: 1 / 1 !important; 
height: auto !important; 
top: 50% !important;
transform: translateY(-50%);
}
{% endstyle %}

DaisyVo_0-1738342082884.png

 

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
Karla8
Explorer
57 0 13

Thank you so much ! this helped 🙂