How can I display a photo gallery only one photo width on mobile?

Hello,

I've created a page with a gallery block. I'm wondering if there is a way to get the photos to display one at a time and you can just scroll through them in mobile view. Right now it makes them quite small on the phone. You can click one open and then flip through them in a carousel fashion, but I hate that kind of functionality on the phone, plus there's no arrow indicator that you can do that.

Hoping there's a way to make the images column-width and stacked.

Thanks!

Jenn

https://www.clintoncac.com/photo-gallery

@Mountainmint This previous forum post may help! There is code for mason galleries specifically, which after a few revisions came out to the below. Copy/paste this into your page header. 

<style>
@media screen and (max-width:767px) {
.gallery-masonry-wrapper.gallery-masonry-list--ready {
height: auto !important;
}

figure.gallery-masonry-item { 
position: relative !important; 
width: 100% !important; 
transform: unset !important; 
margin-bottom: 30px !important; }
.gallery-masonry-item-wrapper {
height: auto !important;
}

.gallery-masonry .gallery-masonry-item[data-loaded] img {
width: 100% !important;
}

.gallery-masonry {
padding-left: 0 !important;
padding-right: 0 !important;
}}
</style>

👉  👉  If this works, @tuanphan deserves the credit for it! 

Thank you @WCS. I don't have access to the page header injector, so I used the Custom CSS field and took out the style tags as suggested in the link that you shared. I also added a little padding on the sides. Thank you!

@media screen and (max-width:767px) {
    .gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 3 !important;
    padding-right: 3 !important;
}
}

@WCS I also have a similar question about the carousels on the site. Is there a similar code for making carousels only one image wide on mobile? Thank you!

@Mountainmint Can you share link to page where you use carousel? I don't see it on current page