Jump to content

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

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

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

Screenshot 2022-02-23 at 08.54.58.png

Link to comment
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

Screenshot 2022-02-23 at 08.54.58.png

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

 

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

 

Screenshot 2022-02-26 at 18.01.35.png

Link to comment
18 hours ago, lacromp said:

 

Screenshot 2022-02-26 at 18.01.35.png

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

 

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
  • 1 year later...
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 !

Link to comment
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

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

 

Link to comment
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;
}
}

 

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

Link to comment
  • 3 weeks later...
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/

 

Link to comment
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

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.