Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

[Masonry Grid] Is there a way to display one column on mobile and three on desktop?


Go to solution Solved by tuanphan,

Recommended Posts

I would like to display my photos with a masonry grid of three columns on desktop but when I do so the mobile version gets displayed in two columns, which makes the navigation really hard on a small screen.

Is there a way on Squarespace 7.1 to keep displaying 3 columns on desktop while showing only one on mobile?

Thank you!

Link to comment
  • Solution

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.

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

I am having a challenge in the other direction. I would like the masonry block to display in 2 or possibly even three columns on mobile. I have a test page with a section for both gallery styled as simple grid (black background) and gallery styled as masonry (white background) at the bottom of the page. I prefer the masonry layout but have not be able to figure out how to get it to show multiple columns on mobile device. Any help would be appreciated. 

 

The page in question can be found here:

michaeldabbs.com/boves
If needed the password to get in is 8910

 

 

Link to comment
On 9/21/2021 at 12:27 AM, michael.dabbs said:

I am having a challenge in the other direction. I would like the masonry block to display in 2 or possibly even three columns on mobile. I have a test page with a section for both gallery styled as simple grid (black background) and gallery styled as masonry (white background) at the bottom of the page. I prefer the masonry layout but have not be able to figure out how to get it to show multiple columns on mobile device. Any help would be appreciated. 

 

The page in question can be found here:

michaeldabbs.com/boves
If needed the password to get in is 8910

 

 

Add to Design > Custom CSS

@media only screen and (max-width: 640px) {
    .gallery-masonry .gallery-masonry-wrapper {
        columns: 2;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0px;
    }
    .gallery-masonry-item-wrapper {
        height: auto!important;
    }
    .gallery-masonry-item {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 1.5px!important;
        box-sizing: border-box;
    }

    .gallery-masonry .gallery-masonry-item img {
        height: 100%!important;
      	width: 100%!important;
    }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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