Gallery - 2 columns of Images for desktop gallery and 1 column for mobile - Need code that works

Hello

I have been struggling with this for a while.  I just can not seem to find some code that will work. Or am I doing it wrong?

This is the gallery: https://www.thriveboudoir.com.au/gallery

What I want to achieve is the following:

• Masonry Style
• 1 column for mobile and 2 columns for desktop
• Full Bleed
• Spacing 9

I am pretty sure I am using Squarespace 7.1.

Also , I am unsure of the best place to insert the code. I have tried the Custom CSS area and also for just for the gallery page

I have tried code from searching forums and tried code generated from Chat GTP with no success.

Any help would be hugely appreciated

You can use Gallery Section Masonry with 2 columns in setting. Then we can give you code to make it 1 column on mobile.

That would be wonderful. Thank you

When you've done add it, let me know, we will check & give the code

16 hours ago, tuanphan said:

When you've done add it, let me know, we will check & give the code

Done. Thank you

On 8/29/2023 at 6:28 PM, tuanphan said:

Add this to Website > Website Tools > Custom CSS

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

 

Thank you so much 🙏🙏

I just did that, and it is working perfectly.

I can't tell you how much I appreciate you passing on that information. It has had me stumped for months.

You are a legend

Hi, I'm having a similar problem but this particular code isnt working. I'm using the following settings and want my image gallery to appear as 2 columns on web and 1 column on mobile

On 3/12/2024 at 12:46 PM, nehashafqat said:

Hi, I'm having a similar problem but this particular code isnt working. I'm using the following settings and want my image gallery to appear as 2 columns on web and 1 column on mobile

Above is for Gallery Masonry, with Gallery Grid, use this code

@media screen and (max-width:767px) {
	.gallery-grid-wrapper {
		grid-template-columns: repeat(1,1fr) !important;
}
}

If it doesn't work, please share link to page where you use gallery, I can check easier

@tuanphan Thank you for this code. Had the same problem and came across it. Works perfectly, you have some serious talent!

@tuanphan this is great it worked great with the code you gave to @ThrivePhotography

I applied on my website for the homepage. On desktop I still have my 3 columns, I have one on mobile.

but on Ipad I got three. is there a way top to have like two columns on ipad ? thanks a lot.

It's for this page : https://www.maisonhesper.com

6 hours ago, Kinreu said:

@tuanphan this is great it worked great with the code you gave to @ThrivePhotography

I applied on my website for the homepage. On desktop I still have my 3 columns, I have one on mobile.

but on Ipad I got three. is there a way top to have like two columns on ipad ? thanks a lot.

It's for this page : https://www.maisonhesper.com

 

With 2 columns on iPad, use this CSS code

@media only screen and (max-width: 991px) and (min-width:768px) {
body.homepage {
    .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;
    }
}}

Thanks a lot @tuanphan It actually makes the trick on ipad. where I have two columns now, but i'm loosing the one column on mobile. Not sure its possible to have everything at once : 3 columns on desktop, 2 on ipad and 1 on mobile. 

I don't get why Squarespace do not let styling menu be different from desktop and mobile on galleries.

21 hours ago, Kinreu said:

Thanks a lot @tuanphan It actually makes the trick on ipad. where I have two columns now, but i'm loosing the one column on mobile. Not sure its possible to have everything at once : 3 columns on desktop, 2 on ipad and 1 on mobile. 

I don't get why Squarespace do not let styling menu be different from desktop and mobile on galleries.

The code should run on Tablet Only, it won't run on Mobile. If it run on mobile, maybe some code conflict together. Can you send all current code in CSS?

Ohhh so I had to copy both part of the code like this ? 

/* No underline Nav */
.header-nav-item--active a {
background-image: none!important;
}

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

@media only screen and (max-width: 991px) and (min-width:768px) {
body.homepage {
    .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;
    }
}}

because it's seems to work on all device now. Thanksa gain for your feedback, let me know if I should remove something 🙂

21 hours ago, Kinreu said:

Ohhh so I had to copy both part of the code like this ? 

 

/* No underline Nav */
.header-nav-item--active a {
background-image: none!important;
}

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

@media only screen and (max-width: 991px) and (min-width:768px) {
body.homepage {
    .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;
    }
}}

 

because it's seems to work on all device now. Thanksa gain for your feedback, let me know if I should remove something 🙂

I see it still 1 image/row on mobile now

@tuanphan This is what I wanted, 3 column on desktop, 2 on ipad and 1 on mobile. is there a problem the code I sent ? should I remove some of it ? thanks again.

21 hours ago, Kinreu said:

@tuanphan This is what I wanted, 3 column on desktop, 2 on ipad and 1 on mobile. is there a problem the code I sent ? should I remove some of it ? thanks again.

I see the code is correct and it already show 3 on desktop, 2 on tablet and 1 on mobile. What is problem here?

thanks @tuanphan that i wanted the confirmation for that the code to display in all the situation was correct.  Thanks afain for your help.

Hi @tuanphan I tried your solution to implement for a blog posts, which contains a Grid gallery. But for some reason the code do not work for me.

I would like to make gallery within blog posts (in general) to display content on mobile devices within 1 column.

URL: https://www.slovakspots.com/bratislava-accommodation-1/hotel-devin
Password: Ulicajekrasnydom

Thank you for your help! 🙂 

On 5/13/2024 at 6:56 PM, GregOvens said:

Hi @tuanphan I tried your solution to implement for a blog posts, which contains a Grid gallery. But for some reason the code do not work for me.

I would like to make gallery within blog posts (in general) to display content on mobile devices within 1 column.

URL: https://www.slovakspots.com/bratislava-accommodation-1/hotel-devin
Password: Ulicajekrasnydom

Thank you for your help! 🙂 

You can use this code

@media screen and (max-width:767px) {
body[class*="type-blog"] .gallery-block .slide {
    width: 100% !important;
}
}