Jump to content

How to increase columns in mobile view for masonry gallery layout? make 3 column the same as tablet view. same for Projects in Portfolio pages

Recommended Posts

Hi, Ive tried the codes provided for the other requests but none seems to solve my need. I want the masonry layout to appear the same as default that is already set up but with one or two more columns. I want this change to be applied across all pages and gallery sections. It is exactly shown as i want when i check the "Desktop site" on my phone browser.

I also need a code to make the portfolio page show multiple projects in a row instead of only one. 

My URL: https://ahmadtaharetoucher.squarespace.com

image.thumb.png.a16280ad0e33cc13fdeded0b7ca72472.pngimage.thumb.png.e9ec313c8f96b89ae67f67a4dfa4dc32.png

Link to comment
  • Replies 1
  • Views 448
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

i found a code if anyone is looking for the solution. 

 

Quote

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

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

but now the images are randomly placed on the mobile , i cant seem to figure out how to organize them 

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.