Jump to content

Masonry Grid to display one column on mobile only?

Recommended Posts

I am using Squarespace 7.1 to build my website and I would like the photos on my gallery page to display as a masonry grid of three columns. All good until this point.

The problem is that by doing so the grid on mobile changes to two columns which is very uncomfortable on a phone. Is there a way to change the grid to one column just on mobile while keeping 3 columns on a desktop? It would be awesome if I could also activate lightbox for desktop while keeping it inactive for mobile, though that's not essential. 

Thank you!

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Hi. Add to Design > Custom CSS

/* Masonry one item on mobile */
@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: 0 !important;
    padding-right: 0 !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...
On 7/15/2021 at 6:16 PM, supermatic123 said:

I have used this code and it works perfectly, thank you.
How about if I want to have a margin between the items (at the moment they are all touching with no margin / padding?)

 

Hi. Can you share link to gallery on your site? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 5 months later...

@tuanphan I am having a similar issue. The code above works perfectly, however I would like to add padding between each item vertically. Currently there is padding on the left and right of each image on mobile, but the images stack vertically on top of each other top edge to bottom edge with no padding.

The site is currently password protected but I can share a screen grab here. Notice the blue image has no padding between itself and the orange image. Please note they are images (text is in the image):

Appreciate the help.

Screen Shot 2022-01-15 at 7.16.29 AM.png

Edited by beardandglasses
Link to comment
On 1/15/2022 at 10:22 PM, beardandglasses said:

@tuanphan I am having a similar issue. The code above works perfectly, however I would like to add padding between each item vertically. Currently there is padding on the left and right of each image on mobile, but the images stack vertically on top of each other top edge to bottom edge with no padding.

The site is currently password protected but I can share a screen grab here. Notice the blue image has no padding between itself and the orange image. Please note they are images (text is in the image):

Appreciate the help.

Screen Shot 2022-01-15 at 7.16.29 AM.png

Try changing this line

.gallery-masonry-item-wrapper {
    height: auto !important;
}

to this

.gallery-masonry-item-wrapper {
    height: auto !important;
	margin-bottom: 20px !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.