How to make the image always a scalable square?

Store Design
, , , , , , , , , , ,
1

Hi, how can I set the image in this section to always be a square that scales according to the screen resolution?

CreatorTim_0-1738013261514.png
CreatorTim_0-1738013261514.png1139×425 89.6 KB

Here’s a store where it works exactly how I want it too: https://tomnoske.store/

And here’s my store: https://1049xn-ya.myshopify.com/

Thanks a lot,
Tim

2

Hi @CreatorTim

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

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

{% style %}
{% if template.name == "index" %}
main#MainContent > div:nth-child(1) .image-with-text__media > img {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
{% endif %}
{% endstyle %}

image (4).png
image (4).png1144×847 100 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

1 Like
3

Hey, it’s not working… It only works for page widths of 749px and above. I need it to work primarily for page widths below 749px.

You can check it out here: https://1049xn-ya.myshopify.com/