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

Solved
Tourist
20 0 1

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 Website Review and advice for sale from 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
Tourist
20 0 1

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 Website Review and advice for sale from 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
Tourist
20 0 1

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

0 Likes
Highlighted
Tourist
20 0 1

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 Website Review and advice for sale from 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
Tourist
20 0 1

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

0 Likes
Highlighted
New Member
2 0 0

@oscprofessional Hi, I have a similar problem with the Debut theme, but I want my mobile Gallery images to stay 3 in a horizontal row rather than stacking vertically. Below are screenshots of the desktop view and mobile views respectively.

RH7AMCFBZeftfv

I couldn't figure out how to manipulate the given code in the solution, to create  sort of the reverse effect of the original poster's problem, if that makes sense.

Sorry if I shouldn't have replied, I figured since my problem is similar I shouldn't make a new thread, but I apologize if this is not the case.

0 Likes