How to get 2 photos to show per grid row in mobile layout

amagiovany · May 3

Hello!

I am using the Flatiron template because I love the grid view of the images in the browser. I would also like the mobile view to look like a grid, with two images side by side for each row. I've seen this question asked before and have tried the code snippet below but it's still not showing up in my mobile layout 😞

The website is amandacarrillo.com

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="616552a9bc722e148eebf45c"] {
    grid-template-columns: repeat(2,1fr) !important;
}
.user-items-list-item-container[data-section-id="6162ae8eb97706442ccea54f"] {
    grid-template-columns: repeat(2,1fr);
    grid-gap: 20px 20px !important;
}
}

tuanphan · May 6

Add to Design > Custom CSS > then save & reload the site

/* masonry 2 items */
@media only screen and (max-width: 640px) {
    #grid {
        columns: 2;
        column-gap: 0;
        height: auto!important;
        display: block!important;
        padding: 0px;
    }
   .item {
        height: auto!important;
    }
    .item {
        position: relative!important;
        transform: none!important;
        width: 100%!important;
        display: block !important;
        padding: 1.5px!important;
        box-sizing: border-box;
        top: unset !important;
    }

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

amagiovany · May 17

Thank you, this worked!!!

How to get 2 photos to show per grid row in mobile layout

Recommended Posts

amagiovany

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

tuanphan

Link to comment

amagiovany

Link to comment

Create an account or sign in to comment

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources