How to make images responsive in Symmetry theme

Store Design
, ,
1

My desktop collection images appear cut off and yet my mobile images are totally fine. From talking to help desk on shopify it appears I have to edit the code in Symmetry to make the images responsive for both desktop viewing and mobile. The code I have been supplied with is as follows:

css Copy code

@media screen and (max-width: 600px) { img { max-width: 500px; } }

When I click on edit code, assets, I cannot see where to put this. Any assistance would be appreciated.

2

Hello @Firsttimer

The code above can work fine for some circumstances, but you can just use this simple code, it is much more reliable

img {
    max-width: 100%;
}

You can put it at the bottom of base.css, or theme.css, or styles.css. It depends on your theme.

Hope it helps!

3

Just use this custom css code:

img {
max-width: 100%;
height: auto;
}

4

Hi @Firsttimer

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Styles.css

img {
    max-width: 100% !important;
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly

5

Thank you for your response - do I click on styles.css liquid? Then copy copy exactly and place at bottom?

Regards
Janette

6

the name of your CSS file can be Base.css, theme.css, or styles.css, try searching by the names of these files and copy and paste the code at the bottom of that file.