[Captura de tela 2025-04-22 182242.png] [Captura de tela 2025-04-22 182235.png] How can I make the mobile version responsible (img)?

Hi @kuromi , Please go to Actions > Edit code > Assets > universe.css file and paste this at the bottom of the file: #spro-sp_tiles_WzwWQM .spro-tile { min-height: 0 !important; height: auto !important; } #spro-sp_tiles_WzwWQM .spro-img { position: relative !important; width: 100% …

Hey @kuromi , To make the image responsive on the mobile version, you’ll want to ensure that the image uses CSS properties like max-width: 100% and height: auto. This allows the image to scale properly according to the screen size. Could you please share your store URL and the password (if it’s pa…

HI @kuromi You will most likely need to adjust mobile CSS so that images use “object-fit: contain” instead of “object-fit: cover,” as cover just stretches the image, cutting off the text. Note that it is a better solution to have real text over the images, but it depends on whether your theme suppo…

hi I just tried the “height: auto” but it didn’t work, it creates a gap at the bottom part of the img box. https://multimax.jp/

@kuromi , Follow these steps: Go to Online Store Edit Code Find theme.liquid file Add the following code in the bottom of the file above tag @media only screen and (max-width: 800px) { #spro-sp_tiles_WzwWQM .spro-container .spro-grid { display: grid; grid-template-columns: 1…

Hm, I wanted the images to be responsible, because you cannot read all the text on mobile version

I agree on having real text, but I wanted a more quick solution. The contain creates a gap at the bottom and at the top of the img

It worked on the mobile version, but messed up the desktop :sweat_smile: but I managed to fix it. Thanks a lot!!!

Hi @kuromi , You’re welcome and happy to guide you :blush:

Responsible design

Store Design

namphan April 23, 2025, 3:46am 10

Hi @kuromi ,

You’re welcome and happy to guide you

Topic		Replies	Views
How can I fix my liquid code for a responsive image on mobile? Store Design product-page	2	71	November 6, 2023
Image with overlay is not properly responsive Store Design troubleshooting	10	204	February 23, 2022
Codice Css per rendere L'immagine con testo Responsive su mobile con il tema debut? Design di Shopify	1	41	March 27, 2020
How to adjust image size on mobile view Store Design landing-page	6	420	May 7, 2024
How can I prevent images from stretching on mobile? Store Design css	3	62	January 17, 2023

Responsible design

Related topics