Different masonry grid display for mobile only

samranlet · May 6

I'm looking for a way to set all masonry galleries to display with only one column on mobile (versus multiple columns on desktop), and it seems some custom coding will be required to do this. Can anyone help? My site is samantharanlet.com

Thank you!

tuanphan · May 9

Hi,

Can you share link to page where you use masonry? We can check easier

samranlet · May 10

Yes, I use it on all the pages in my portfolio. One example is www.samantharanlet.com/portfolio/photography

Thank you!

tuanphan · May 11

Add to Design > Custom CSS

/* Masonry one item on mobile */
@media screen and (max-width:767px) {
.gallery-masonry-item-wrapper {
height: auto !important;
margin-bottom: 30px !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: 10 !important;
padding-right: 10 !important;
}
/* new code */
.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}}

samranlet · May 18

That worked a charm! Thank you so very much for your help! I sincerely appreciate it. This looks so much better.

Different masonry grid display for mobile only

Recommended Posts

samranlet

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

samranlet

tuanphan

Link to comment

samranlet

Link to comment

tuanphan

Link to comment

samranlet

Link to comment

Create an account or sign in to comment

tuanphan

samranlet

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources