Masonry Blog - CSS for two columns in mobile view

Hi there, 

Hope you are well. 

I am using the Masonry Grid display for a new blog I am creating in the intent of recreating a layout like the LTK  and Pinterest home pages. I want my layout to have 4 columns in desktop view and 2 columns in mobile view, images only, no text. I was able to achieve the exact desired layout for the desktop view just using squarespace's integrated edit section. However, on the mobile view the thumbnail images are lined in a single column. I was able to successfully achieve two columns in mobile view with CSS but the issue is that there is a huge horizontal gap between the rows which I can't seem to get rid of no matter what I try. Everything else is customized to my liking, I just want to reduce the gap between the rows of images in mobile view to a distance similar to the one in desktop view. When I use for example a negative value for margin-bottom, it succeeds in reducing the gap but then the right image in the first row moves upwards too! How do I go about this while keeping both images in the first row unaffected and aligned? 

I used this code:

@media only screen and (max-width: 767px)  {

#collection-65233dac92628703b8ca1dc1 {
    div#BlogMasonryContainer {

      columns: 2;
        column-gap: 0;
        height: auto!important;
        padding: 0px;
       margin-left: -3.3vw !important;
       margin-right: -3.3vw !important;
    }
    div#BlogMasonryContainer article {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        padding: 5px!important;
        box-sizing: border-box;
     //margin-bottom: -265px !important;
     padding-bottom: 0px !important;
      padding-top: 0px !important;
      }
    div#BlogMasonryContainer article img  {

         height: 50%!important;
          width: 100%!important;
        border-radius:5px;
       } }}

The value "margin-bottom: -265px !important" in the above code obtains the exact desired row gap on the left column when removing the "//" in front of it, but how do keep the images in the first row aligned and therefore impede the right column from moving up past the left image in the first row?

4 hours ago, Jessica07 said:

Hi there, 

Hope you are well. 

I am using the Masonry Grid display for a new blog I am creating in the intent of recreating a layout like the LTK  and Pinterest home pages. I want my layout to have 4 columns in desktop view and 2 columns in mobile view, images only, no text. I was able to achieve the exact desired layout for the desktop view just using squarespace's integrated edit section. However, on the mobile view the thumbnail images are lined in a single column. I was able to successfully achieve two columns in mobile view with CSS but the issue is that there is a huge horizontal gap between the rows which I can't seem to get rid of no matter what I try. Everything else is customized to my liking, I just want to reduce the gap between the rows of images in mobile view to a distance similar to the one in desktop view. When I use for example a negative value for margin-bottom, it succeeds in reducing the gap but then the right image in the first row moves upwards too! How do I go about this while keeping both images in the first row unaffected and aligned? 

I used this code:

@media only screen and (max-width: 767px)  {

#collection-65233dac92628703b8ca1dc1 {
    div#BlogMasonryContainer {

      columns: 2;
        column-gap: 0;
        height: auto!important;
        padding: 0px;
       margin-left: -3.3vw !important;
       margin-right: -3.3vw !important;
    }
    div#BlogMasonryContainer article {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        padding: 5px!important;
        box-sizing: border-box;
     //margin-bottom: -265px !important;
     padding-bottom: 0px !important;
      padding-top: 0px !important;
      }
    div#BlogMasonryContainer article img  {

         height: 50%!important;
          width: 100%!important;
        border-radius:5px;
       } }}

 

The value "margin-bottom: -265px !important" in the above code obtains the exact desired row gap on the left column when removing the "//" in front of it, but how do keep the images in the first row aligned and therefore impede the right column from moving up past the left image in the first row?

Can you share your website URL?

This is the URL of the page :   https://www.jessicafinds.com/tester123999

I modified my CSS code to this which solved both the row gap issue and the right column moving too high up issue. The vertical images (portrait mode) are perfectly distanced column-wise and row-wise, however now the issue is that the horizontal images (landscape mode) aren't, they are being overlapped. I noticed that the issue has to due with the fact that the padding beneath the horizontal style images is shorter that the one beneath the vertical style images, therefore when I reduce the bottom margin to where the vertical images are perfectly distanced, the horizontal ones get overlapped (left picture attached). But then when I increase the bottom padding to 90px in "div#BlogMasonryContainer article" to make the row gap of the first horizontal image right, the row gap between all other images gets messed up (right picture attached). Any solutions?

@media only screen and (max-width: 767px)  

{#collection-65233dac92628703b8ca1dc1 {
    div#BlogMasonryContainer {
       columns: 2;
        column-gap: 0;
        height: auto!important;
        padding: 0px;
       margin-left: -3.3vw !important;
  margin-right: -3.3vw !important;
      
    }
    div#BlogMasonryContainer article {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block;
        padding: 5px!important;
        box-sizing: border-box;
     margin-bottom: -240px;
     padding-bottom: 0px !important;
      padding-top: 0px !important;
      float: left !important;
    transform: unset !important;
    position: initial !important;
       }
    div#BlogMasonryContainer article img {      
        width: 100%!important;
        border-radius:5px;
       height: auto !important;
    }}}