Jump to content

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

Recommended Posts

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

Link to comment
  • Replies 4
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

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

 

Did we help? Click 👍 or mark it as the solution! This helps others find the answers they need. 

Meghan, Owner of Westerly Creative Studio
👩‍💻 🍪  Still need your website policies? Termageddon makes it easy.  Get 10% off your first year! (< affiliate link) 

Link to comment

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

Edited by Mountainmint
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.