Responsible design

[kuromi]

 How can I make the mobile version responsible (img)? 

[rajweb]

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 password-protected)? That way, I can take a closer look and provide more specific recommendations.

If you want to help to implement this please feel free to reach out thanks

best, 

Rajat

Shopify Expert

[kuromi]

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/

[rajweb]

@kuromi ,

Follow these steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag

@media only screen and (max-width: 800px) {
    #spro-sp_tiles_WzwWQM .spro-container .spro-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0px !important;
    }
}

Result:

This will force the grid to have no spacing between items on screens 800px wide or smaller. Let me know if you also want padding removed or image corners squared off for mobile!

Best,

Rajat

[kuromi]

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

[Laza_Binaery]

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 supports that. 

[kuromi]

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

[namphan · Accepted solution]

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% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    transform: none !important;
}

[kuromi]

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

[namphan]

Hi @kuromi,

You're welcome and happy to guide you 😊