Make Gallery images responsive, and keep vertically aligned in Mobile version of Debut theme

Solved
Highlighted
New Member
20 0 0

Hi,

I am using the Debut theme. I have managed to tweak some of the code but I am stuck on this one issue.

I am trying to make my gallery images responsive (stay in the same ratio/size on all devices) and also keep the gallery images stacked vertically. when  I view in mobile version, the gallery images stack horizontally, which i do not want. I have the code to make the images responsive, but i just don't know where to add the code. 

can anyone out there help?

 

thanks,

 

Kelly 

0 Likes
Highlighted
Hello Kelly,
Please share your site url so that I can check and let you know exact solution here.
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Highlighted
New Member
20 0 0

can anyone assist?

0 Likes
Highlighted

@kellybanelli,

Can you share screenshot of your gallery section

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
20 0 0

Screenshot 2020-04-02 at 18.19.07.pngScreenshot 2020-04-02 at 18.18.57.png

0 Likes
Highlighted
New Member
20 0 0

as you can see, iv managed to make the hero image and slide show responsive so that they shrink to fit the mobile view. id like to do the same with the features product/ gallery images so that they stay aligned horizontally instead of stacking on-top of each-other. 

0 Likes
Highlighted

Success.

@kellybanelli,

Add below css in theme.scss file

@media only screen and (max-width: 749px){
.collection-grid ul.grid.grid--uniform li.grid__item.medium-up--one-half {
    width: 50%;
}
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
20 0 0

Once again you have delivered!!! thank you so much!!!

0 Likes