Mobile image layout to single

Site URL: https://www.nickbarr.co

Hey all,

How do I get single image layout on mobile? I have it set to Masonry Grid with 3 columns in square space, I like the look of desktop view, but not on mobile.

It used to be single grid on mobile but recently it change through square space. Any fixes that will help me with mobile layout only?

Many thanks!

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.homepage {
.gallery-masonry-wrapper {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: static !important;
    width: 100% !important;
    transform: unset !important;
    margin-bottom: 20px;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
.gallery-masonry-item img {
    width: 100% !important;
}
}
}

Genius, thank you so much, looks perfect now! screen shot below.

I thought it would fix the gallery link to the image but that still shows up as 2 grid. Anyway to also have that as a single row in mobile view? See the attached image.

Above code doesn't work?

It did work for the navigation page, but in the linked gallery pages it shows up a grid 2 across. Shown in attached image in previous post.

Did you ever get this figured out? Having the same problem... 

No sorry, super annoying. I know it’s an easy fix but can’t figure it out.

are you having the same issue?