Jump to content

Masonry Blog - CSS for two columns in mobile view

Recommended Posts

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?

2.jpg

3.jpg

Link to comment
  • Replies 3
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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?

2.jpg

3.jpg

Can you share your website URL?

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment

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

 

 

Screen Shot 2023-10-14 at 19.04.01.png

Screen Shot 2023-10-14 at 18.54.59.png

Edited by Jessica07
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.