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

On 11/28/2021 at 2:48 PM, Winther said:

@tuanphan

here you go.

Password:  1234567

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

The site looks fine here. Which glitch?

@tuanphan perhaps it is has something to do with squarespace updates. There have been some changes lately,  coz your are absolutely right. It looks fine here also. Sorry for the inconvenience. 🙏

Take care and thanks for your time. 

On 2/20/2020 at 7:32 AM, tuanphan said:

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

 

Is there a way to apply this concept to a masonry blog

On 10/6/2023 at 9:37 PM, nahlah said:

Is there a way to apply this concept to a masonry blog

Can you share link to a blog page? We can tweak the code easier

On 10/9/2023 at 5:42 AM, tuanphan said:

Can you share link to a blog page? We can tweak the code easier

yes of course, the link is https://faceoflove.co/diary

On 10/10/2023 at 11:38 PM, nahlah said:

yes of course, the link is https://faceoflove.co/diary

Try this CSS Code

@media screen and (max-width:640px) {
div#BlogMasonryContainer {
        columns: 2;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0 5px;
    }
    div#BlogMasonryContainer article {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 5px!important;
        box-sizing: border-box;
    }

    div#BlogMasonryContainer article img {
        height: 100%!important;
      	width: 100%!important;
    }}

22 hours ago, tuanphan said:

Try this CSS Code

@media screen and (max-width:640px) {
div#BlogMasonryContainer {
        columns: 2;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0 5px;
    }
    div#BlogMasonryContainer article {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 5px!important;
        box-sizing: border-box;
    }

    div#BlogMasonryContainer article img {
        height: 100%!important;
      	width: 100%!important;
    }}

 

On 10/13/2023 at 7:39 PM, nahlah said:

 

What is problem?

Did we find a solution to reducing the gap in the first column when landscape images are used? @tuanphan

This is what the mobile version of the masonry gallery looks like. I'm really happy with it except for the gaps in the first column.

This is the code I've used:

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

Can anyone help me further with this?

Surprisingly I figured it out 😂  Here's the code I used if anyone is interested!

@media screen and (max-width:767px) {
    .gallery-masonry .gallery-masonry-item img {
        height: 100%!important;
        width: 100%!important;
    }
    .gallery-masonry .gallery-masonry-wrapper {
        columns: 2;
        column-gap: 20px;
        padding: 0px;
        height: auto!important;
        display: block!important;
     }
    .gallery-masonry-item-wrapper {
        height: auto!important;
    }
    .gallery-masonry-item {
        position: relative!important;
        padding-bottom: 20px!important;
        transform: none!important;
        width: 100%!important;
        display: block;
       }
}

On 10/15/2023 at 4:54 AM, tuanphan said:

What is problem?

it's not really lining up and the images are mostly cut off

Hi @tuanphan, 

I'm trying to create a two column masonry view for my blog for mobile, is there way to help me?
 

www.studioswoop.nl/blog

key; !Uchtball0n

thanks in advance

On 1/8/2024 at 9:46 PM, Huib said:

Hi @tuanphan, 

I'm trying to create a two column masonry view for my blog for mobile, is there way to help me?
 

www.studioswoop.nl/blog

key; !Uchtball0n

 

thanks in advance

Use this CSS code

@media screen and (max-width:767px) {
    div#BlogMasonryContainer {
        columns: 2;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0 5px;
    }
    div#BlogMasonryContainer article {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 5px!important;
        box-sizing: border-box;
    }

    div#BlogMasonryContainer article img {
        height: 100%!important;
      	width: 100%!important;
    }
}

Wauw @tuanphan, this is really helpfull. 

Is there a way to keep the original width of the image instead of the orginal heigth?

Wish

Current

On 1/10/2024 at 4:47 PM, Huib said:

Wauw @tuanphan, this is really helpfull. 

Is there a way to keep the original width of the image instead of the orginal heigth?

 

Wish

 

Current

I can't find a way to fix this. You try posting question in new thread. You can get help easier

Okay Thanks for your help anyway @tuanphan !!