How to Adjust to 2 columns in Masonry Grid in Mobile View in Squarespace 7.1

Site URL: https://capybera-llama-l3jx.squarespace.com/basic-cakes-and-cookies

Hi guys, 

I would like to customise to display 2 images in 1 row in Masonry Grid in Mobile View.

I have use this before but didn't work for me.

Quote

@media screen and (max-width: 767px) {
  .sqs-gallery-block-grid {
    width: 50%;
  }
}

Here is my website url: https://capybera-llama-l3jx.squarespace.com/basic-cakes-and-cookies
Please advise. Thanks!

Which images? Can you take screenshot?

This section

8 hours ago, sskkkkk said:

This section

 

I see you fixed?

I'm looking for 2 images in 1 row in Masonry Grid in Mobile View.

On 2/19/2020 at 8:44 AM, sskkkkk said:

I'm looking for 2 images in 1 row in Masonry Grid in Mobile View.

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
figure.gallery-masonry-item {
    width: 50% !important;
    float: left !important;
    transform: unset !important;
    position: initial !important;
}
figure.gallery-masonry-item img {
    width: 100% !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
}

Hi @tuanphan ! I'm trying to sort out the same thing with another website I'm working on:

https://pigeon-koala-t94f.squarespace.com/

password: sj 

Basically I want it to show like this one mobile:

And I followed your code but it ends up looking like this:

and leaving massive gaps on top and under it. 

Any solution to this? Thank you in advance.

17 minutes ago, wholeheartcreative said:

Hi @tuanphan ! I'm trying to sort out the same thing with another website I'm working on:

 

https://pigeon-koala-t94f.squarespace.com/

password: sj 

Basically I want it to show like this one mobile:

e gaps on top and under it. 

Any solution to this? Thank you in advance.

You need another code. Above code will create problem with some images.

I'm solving same problem for a client (in progress). 

I think I will use grid, but it still has some problems, still testing

@tuanphan all good thank you for the fast reply! all the best with it! 🙂

By the way, do you know what the best way to contact Squarespace head developers for concerns like this?

1 minute ago, wholeheartcreative said:

@tuanphan all good thank you for the fast reply! all the best with it! 🙂

By the way, do you know what the best way to contact Squarespace head developers for concerns like this?

I only contact email/livechat....but they will not support custom code

On 2/22/2020 at 7:45 PM, tuanphan said:

You need another code. Above code will create problem with some images.

I'm solving same problem for a client (in progress). 

I think I will use grid, but it still has some problems, still testing

Hi @tuanphan  How are you? Were you able to figure for your client by any chance? 🙂 

1 minute ago, wholeheartcreative said:

Hi @tuanphan  How are you? Were you able to figure for your client by any chance? 🙂 

I dropped that job, the client is not happy with the end result, there are some problems generated from the code. ☹️

3 hours ago, tuanphan said:

I dropped that job, the client is not happy with the end result, there are some problems generated from the code. ☹️

Oh no 😞 Sorry to hear that. Thank you for your reply as always.
I guess I'd have to settle with a grid for now. How I wish it was easy! 

3 hours ago, wholeheartcreative said:

Oh no 😞 Sorry to hear that. Thank you for your reply as always.
I guess I'd have to settle with a grid for now. How I wish it was easy! 

Just found this plugin, you can try ;)

(affiliate link)

On 3/2/2020 at 6:04 AM, wholeheartcreative said:

Oh no 😞 Sorry to hear that. Thank you for your reply as always.
I guess I'd have to settle with a grid for now. How I wish it was easy! 

No easy way for that from JS side - SS wrote code in manner you can't really access it or affect, and all masonry calculations goes in code.
But damn, that's a simple CSS, nothing complex:
 

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

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

On 5/3/2020 at 4:45 PM, michaeleparkour said:

No easy way for that from JS side - SS wrote code in manner you can't really access it or affect, and all masonry calculations goes in code.
But damn, that's a simple CSS, nothing complex:
 

 

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

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

Hey, this code is great apart from the fact it's not in order. I've combined both your code and @tuanphan's code but i still get some vertical spacing. Here is the code:

@media screen and (max-width:640px) {
figure.gallery-masonry-item {
    width: 50% !important;
    float: left !important;
    transform: unset !important;
    position: initial !important;
    display: block!important;
    padding: 5px!important;
    box-sizing: border-box;
}
figure.gallery-masonry-item img {
    width: 100% !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
}

I've also attached how this code is looking. The only issue is the space between the landscape and portrait photos. Feel like we're on the verge of actually getting this code perfect.

Hello, I wonder if there has been any revelations on the masonry summary grid for mobile? I'm still stuck with similar results to @lauzza above. Sorry to ask the legendary @tuanphan but do you perhaps know?

Thank you so much!

On 11/4/2021 at 2:26 AM, brandartisan said:

Hello, I wonder if there has been any revelations on the masonry summary grid for mobile? I'm still stuck with similar results to @lauzza above. Sorry to ask the legendary @tuanphan but do you perhaps know?

Thank you so much!

Can you share link to page where you have problem?

Thank you so much! I've sent you an email - much much appreciated!

Sent the code

Hey 😇

did anyone solve this? 

@tuanphan can you please share the code.

Kind regards. 

On 11/26/2021 at 11:30 AM, Winther said:

Hey 😇

did anyone solve this? 

@tuanphan can you please share the code.

 

Kind regards. 

I don't remember the code. Can you share link to page where you added gallery? We will take a look

@tuanphan

I´m developing my primary website in trial mode but I have made a test site with the masonry gallery code i have worked on so far. I need your email to add permission for you to edit and have a look. 

Send PM with email and I will add you asap. 🙂

Here is the code I have been working on but it acts weird. Especially on desktop scrolling down. The images kinda glitches so something must be kinda broken in the code. 

// ** MASONRY CUSTOM GRID

 .gallery-masonry .gallery-masonry-wrapper {
         columns: 3!important;
         column-gap: 4%!important;
         width:100%!important;
         height: 100%!important;
         display: block!important;
         padding-left: 20px!important;
         padding-right: 20px!important;
    }
     .gallery-masonry-item-wrapper {
         height: 100%!important;
    }
     .gallery-masonry-item {
         position:relative!important;
         transform: none!important;
         width: 100%!important;
         height: 100%!important;
         display: block!important;
         padding: 1.5px!important;
         box-sizing: border-box;
         overflow: hidden;
         will-change: transform;
         margin-bottom: 15.625vw!important;
    }
     .gallery-masonry .gallery-masonry-item img {
         height: 100%!important;
         width: 100%!important;
    }
}
 @media screen and (max-width:767px) {
     .gallery-masonry-wrapper.gallery-masonry-list--ready {
         height: auto !important;
    }
     figure.gallery-masonry-item {
         position: relative !important;
         width: 50% !important;
         float: left !important;
         transform: unset !important;
         position: initial !important;
         will-change: transform!important;
         display: block!important;
         padding: 15px!important;
         box-sizing: border-box;
         margin-bottom:15.625vw!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;
    }
}
 

21 hours ago, Winther said:

@tuanphan

I´m developing my primary website in trial mode but I have made a test site with the masonry gallery code i have worked on so far. I need your email to add permission for you to edit and have a look. 

Send PM with email and I will add you asap. 🙂

 

Here is the code I have been working on but it acts weird. Especially on desktop scrolling down. The images kinda glitches so something must be kinda broken in the code. 

 

 

// ** MASONRY CUSTOM GRID

 

 .gallery-masonry .gallery-masonry-wrapper {
         columns: 3!important;
         column-gap: 4%!important;
         width:100%!important;
         height: 100%!important;
         display: block!important;
         padding-left: 20px!important;
         padding-right: 20px!important;
    }
     .gallery-masonry-item-wrapper {
         height: 100%!important;
    }
     .gallery-masonry-item {
         position:relative!important;
         transform: none!important;
         width: 100%!important;
         height: 100%!important;
         display: block!important;
         padding: 1.5px!important;
         box-sizing: border-box;
         overflow: hidden;
         will-change: transform;
         margin-bottom: 15.625vw!important;
    }
     .gallery-masonry .gallery-masonry-item img {
         height: 100%!important;
         width: 100%!important;
    }
}
 @media screen and (max-width:767px) {
     .gallery-masonry-wrapper.gallery-masonry-list--ready {
         height: auto !important;
    }
     figure.gallery-masonry-item {
         position: relative !important;
         width: 50% !important;
         float: left !important;
         transform: unset !important;
         position: initial !important;
         will-change: transform!important;
         display: block!important;
         padding: 15px!important;
         box-sizing: border-box;
         margin-bottom:15.625vw!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;
    }
}
 

 

 

 

Can you share site url? We can check easier

@tuanphan

here you go.

Password:  1234567

https://plane-dolphin-phrx.squarespace.com/