Mobile Responsive Image in sections - Barberry Theme

Solved
Highlighted
Excursionist
29 0 4

Hello,

I'm trying to figure out if there is a way to make the images responsive when viewed on a mobile device. I am using Barberry Theme and several of the sections that I created have images within columns. When it is viewed on Desktop its fits well with the page but when viewed in Mobile the images break into two rows. Is there a way to add a css code to stack the images when viewed on mobile? I have a photo for reference.

  Screen Shot 2020-07-14 at 10.15.23 AM.png

0 Likes
Highlighted
Shopify Partner
501 56 78

Hi @matthewpineda,

Please post the url to your store so I can post a solution here.

If helpful, please Like and Accept Solution
Want to hire me?
Contact Me At
WhatsApp or email me at umairabbascs@gamil.com
Hire me for 1) Theme coding 2) PSD to Shopify 3) Store optimization 4) SEO 5) Store setup 6) and more!
0 Likes
Highlighted
Highlighted
Shopify Partner
501 56 78

This is an accepted solution.

Hi @matthewpineda,

Add the following code to your theme.scss.liquid file (Edit code -> Assets -> theme.scss.liquid)

@medi screen and (max-width: 468px) {
.products-grid  .col-auto {
   min-width: 100%;
}
}

  

Let me know if you need any other help.

Cheers

If helpful, please Like and Accept Solution
Want to hire me?
Contact Me At
WhatsApp or email me at umairabbascs@gamil.com
Hire me for 1) Theme coding 2) PSD to Shopify 3) Store optimization 4) SEO 5) Store setup 6) and more!
0 Likes
Highlighted
Excursionist
29 0 4

Hmmm I tried adding the code at the bottom but it broke the page. Is there a specific placement I need to add the code in? 

0 Likes
Highlighted
Shopify Partner
501 56 78

Your website is reflecting the changes that you wanted. I think you sent this message before accepting my answer as a solution. Right?

If helpful, please Like and Accept Solution
Want to hire me?
Contact Me At
WhatsApp or email me at umairabbascs@gamil.com
Hire me for 1) Theme coding 2) PSD to Shopify 3) Store optimization 4) SEO 5) Store setup 6) and more!
0 Likes
Highlighted
Excursionist
18 0 4

Hi @UmairA ,

Would you be able to advise why are some of the product titles sitting on product image when viewed on mobile?

I did not make any changes to this page, not sure why it became like this suddenly.

Appreciate your help on this.

IMG-0916.PNG

0 Likes