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

ssteart · April 5, 2021

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!

tuanphan · April 10, 2021

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

ssteart · April 14, 2021

@tuanphan Thank you so much!

michael.dabbs · September 20, 2021

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

tuanphan · September 22, 2021

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

michael.dabbs · September 22, 2021

Thank you so much. Thats perfect!

lacromp · February 23, 2022

I am looking for the exact same solution just for the .blog-masonry gallery to make it show 2 columns side by side on mobile.

I did try to use your code @tuanphan for the masonry and exchanged the elements with those of blog-masonry / blog-item etc., but unfortunately it wouldn't work... (see screenshot attached).

Do you maybe have a solution for this use-case too?

This is the page:
https://caterpillar-elk-gzg2.squarespace.com/family-and-friends

PW: standout

tuanphan · February 25, 2022

On 2/23/2022 at 2:55 PM, lacromp said:

I am looking for the exact same solution just for the .blog-masonry gallery to make it show 2 columns side by side on mobile.

I did try to use your code @tuanphan for the masonry and exchanged the elements with those of blog-masonry / blog-item etc., but unfortunately it wouldn't work... (see screenshot attached).

Do you maybe have a solution for this use-case too?

This is the page:
https://caterpillar-elk-gzg2.squarespace.com/family-and-friends

PW: standout

Try this new code

@media only screen and (max-width: 640px) {
    div#BlogMasonryContainer {
        columns: 2;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0px;
    }
    div#BlogMasonryContainer {
        height: auto!important;
    }
   .blog-masonry .masonry-ready .entry.is-loaded {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 1.5px!important;
        box-sizing: border-box;
    }

    .blog-masonry .masonry-ready .entry.is-loaded img {
        height: 100%!important;
      	width: 100%!important;
    }
}

lacromp · February 26, 2022

On 2/25/2022 at 11:20 AM, tuanphan said:
Try this new code
@media only screen and (max-width: 640px) {
    div#BlogMasonryContainer {
        columns: 2;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0px;
    }
    div#BlogMasonryContainer {
        height: auto!important;
    }
   .blog-masonry .masonry-ready .entry.is-loaded {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 1.5px!important;
        box-sizing: border-box;
    }

    .blog-masonry .masonry-ready .entry.is-loaded img {
        height: 100%!important;
      	width: 100%!important;
    }
}
@tuanphan thank you so much for your quick reply!

The #BlogMasonryContainer height:auto part is in there twice, ist that on purpose?

Unfortunately the code doesn't work on my end. The images are still to large... and I can't seem to find the right selector to correct this ._.

tuanphan · February 27, 2022

18 hours ago, lacromp said:

Try this new code

@media only screen and (max-width: 640px) {
    div#BlogMasonryContainer {
        columns: 2;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0px;
    }
    div#BlogMasonryContainer {
        height: auto!important;
    }
   .blog-masonry .masonry-ready .entry.is-loaded {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 1.5px!important;
        box-sizing: border-box;
    }

    .blog-masonry .masonry-ready .entry.is-loaded img {
        height: 100%!important;
      	width: 100%!important;
    object-fit: contain !important;
    }
}

LostAndFurious · March 14, 2023

On 2/27/2022 at 12:35 PM, tuanphan said:

Try this new code

@media only screen and (max-width: 640px) {
    div#BlogMasonryContainer {
        columns: 2;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0px;
    }
    div#BlogMasonryContainer {
        height: auto!important;
    }
   .blog-masonry .masonry-ready .entry.is-loaded {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 1.5px!important;
        box-sizing: border-box;
    }

    .blog-masonry .masonry-ready .entry.is-loaded img {
        height: 100%!important;
      	width: 100%!important;
    object-fit: contain !important;
    }
}

Hi,

I’m looking for a way to increase the space between each pictures in a 1 column masonry gallery on mobile. While keeping them full size… Do you think you could help ?

i ve looked everywhere and can’t seem to find the solution…

thanks a lot in advance !

tuanphan · March 15, 2023

9 hours ago, LostAndFurious said:

Hi,

I’m looking for a way to increase the space between each pictures in a 1 column masonry gallery on mobile. While keeping them full size… Do you think you could help ?

i ve looked everywhere and can’t seem to find the solution…

thanks a lot in advance !

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

LostAndFurious · March 15, 2023

6 hours ago, tuanphan said:

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

Hi,

Sure : https://www.vladimirconsigny.com/nights-in-sicily here is one.

The page actually contains a slideshow and a masonry. The slideshow only shows up on desktop and masonry on phone... (a workaround i found to display differently on different devices. Not sure that there wasn't a better solution though...? )

Thank yo very much for taking the time...

tuanphan · March 17, 2023

On 3/15/2023 at 6:28 PM, LostAndFurious said:

Hi,

Sure : https://www.vladimirconsigny.com/nights-in-sicily here is one.

The page actually contains a slideshow and a masonry. The slideshow only shows up on desktop and masonry on phone... (a workaround i found to display differently on different devices. Not sure that there wasn't a better solution though...? )

Thank yo very much for taking the time...

Add to Design > Custom CSS. Adjust number 50 for spacing

@media screen and (max-width:767px) {
	.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(1,1fr) !important;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
    margin-bottom: 50px;
}
.gallery-masonry-item-wrapper {
    height: 100% !important;
}
}

LostAndFurious · March 17, 2023

8 hours ago, tuanphan said:

Add to Design > Custom CSS. Adjust number 50 for spacing

@media screen and (max-width:767px) {
	.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(1,1fr) !important;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
    margin-bottom: 50px;
}
.gallery-masonry-item-wrapper {
    height: 100% !important;
}
}

Wow ! Thank you so much ! It's absolutely perfect. Exactly what I was trying to do....

Thanks a lot !

ahmadtaha · April 7, 2023

On 9/22/2021 at 10:04 AM, tuanphan said:

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

it worked for me, but here is the catch. the photos now are placed randomly i cant figure out how to organize them since they are not in same order as they are in the gallery. anu idea on why is this happening?

url : https://ahmadtaharetoucher.squarespace.com/

tuanphan · April 8, 2023

13 hours ago, ahmadtaha said:

it worked for me, but here is the catch. the photos now are placed randomly i cant figure out how to organize them since they are not in same order as they are in the gallery. anu idea on why is this happening?

url : https://ahmadtaharetoucher.squarespace.com/

Yes. It will change order on mobile. I have no idea to fix this

nahlah · October 6, 2023

On 2/27/2022 at 6:35 AM, tuanphan said:

Try this new code

@media only screen and (max-width: 640px) {
    div#BlogMasonryContainer {
        columns: 2;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0px;
    }
    div#BlogMasonryContainer {
        height: auto!important;
    }
   .blog-masonry .masonry-ready .entry.is-loaded {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 1.5px!important;
        box-sizing: border-box;
    }

    .blog-masonry .masonry-ready .entry.is-loaded img {
        height: 100%!important;
      	width: 100%!important;
    object-fit: contain !important;
    }
}

I applied this code to my blog but it messed up the sizing of the images. Has anyone found a way to make this feature work?

tuanphan · October 12, 2023

On 10/7/2023 at 3:55 AM, nahlah said:

I applied this code to my blog but it messed up the sizing of the images. Has anyone found a way to make this feature work?

What is your blog page?

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

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

ssteart

LostAndFurious

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources