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

[kellybanelli]

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 

[oscprofessional]

Hello Kelly,
Please share your site url so that I can check and let you know exact solution here.

[kellybanelli]

https://curajewellery.com 

[kellybanelli]

can anyone assist?

[oscprofessional]

@kellybanelli,

Can you share screenshot of your gallery section

[kellybanelli]

[kellybanelli]

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. 

[oscprofessional · Accepted solution]

@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%;
}
}

[kellybanelli]

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

[momoyabeauty]

@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.

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.