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

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.