Adjust the size of multicolumn images for mobile only

Store Design
1

Hi, thank you in advance for your help.

I like the full width version for multicolumn on desktop, but for mobile the images are huge. Is there a code that can target the size for mobile only? I haven’t made that particular page on my Shopify public yet.

2

You can try to create different sections for mobile and desktop only so you can create and upload images for each section

3

I’m confused. How would I do that?

Do you mean make some sections visible for mobile and others visible for desktop? Is that even an option?

4

Yes, you can create 2 sections, one visible for mobile and another visible for desktop. If your theme does not support that option then you can using CSS code to make it visible for desktop or mobile only.

5

My theme is Refresh 9.0. I’ll take a look, maybe I missed it on the editor.

6

Hello @mjdubarr ,

You can follow these steps:

  • Go to Online Store → Theme → Actions → Edit code
  • Find the HTML file for the page where you want to add the CSS code.
  • Add the following code inside the section of the HTML file:

Remember to replace .your-multicolumn-class with the actual class name that you used for your multi-column layout container.

  • Save changes.

Hope this can help you out. Let us know if you need any further support

1 Like