Enlarge the image on the phone

Highlighted
Shopify Partner
136 0 8

Hi need help enlarging the image only on the phone. On a computer that will remain the same size. Would appreciate help.

0 Likes
Highlighted
Excursionist
36 5 8

Hi there,

 

Can you share a link to your website and describe what picture exactly you'll need to change?

Even without knowing the specifics, I might be able to offer some advice to you. This is what works for me with the Supply theme.

 

You will need to edit your CSS for this.

Make sure to duplicate your theme before doing this if you're uncertain on any changes you make to your code.

 

Navigate to Sales Channels > Themes > Actions > Edit Code and find theme.scss.liquid.

Scroll to the bottom of the code and put something like this in and save:

 

/* Mobile-only image resizing */
img {
     @include at-query ($max, $small) {
          width: 100px;
          height: 100px;
     }
}

This example is nonspecific, and would affect all images unless you specified what class this CSS should affect.

In this example, it should make all images 100x100px on mobile. You could change the dimensions to whatever you like.

If I was able to help you, please help me by liking my comment and marking it as an accepted solution.
If you're feeling extra nice, you can throw a coffee at me through Venmo @scoducks :)

I am open to new business partnerships-- let me know if you need someone to help out with design, product management, social media, marketing, or SEO!
0 Likes