Masonry Grid to display one column on mobile only?

I am using Squarespace 7.1 to build my website and I would like the photos on my gallery page to display as a masonry grid of three columns. All good until this point.

The problem is that by doing so the grid on mobile changes to two columns which is very uncomfortable on a phone. Is there a way to change the grid to one column just on mobile while keeping 3 columns on a desktop? It would be awesome if I could also activate lightbox for desktop while keeping it inactive for mobile, though that's not essential. 

Thank you!

Hi. Add to Design > Custom CSS

/* Masonry one item on mobile */
@media screen and (max-width:767px) {
	.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}

I have used this code and it works perfectly, thank you.
How about if I want to have a margin between the items (at the moment they are all touching with no margin / padding?)

On 7/15/2021 at 6:16 PM, supermatic123 said:

I have used this code and it works perfectly, thank you.
How about if I want to have a margin between the items (at the moment they are all touching with no margin / padding?)

 

Hi. Can you share link to gallery on your site? We can check easier

@tuanphan I am having a similar issue. The code above works perfectly, however I would like to add padding between each item vertically. Currently there is padding on the left and right of each image on mobile, but the images stack vertically on top of each other top edge to bottom edge with no padding.

The site is currently password protected but I can share a screen grab here. Notice the blue image has no padding between itself and the orange image. Please note they are images (text is in the image):

Appreciate the help.

On 1/15/2022 at 10:22 PM, beardandglasses said:

@tuanphan I am having a similar issue. The code above works perfectly, however I would like to add padding between each item vertically. Currently there is padding on the left and right of each image on mobile, but the images stack vertically on top of each other top edge to bottom edge with no padding.

The site is currently password protected but I can share a screen grab here. Notice the blue image has no padding between itself and the orange image. Please note they are images (text is in the image):

Appreciate the help.

Try changing this line

.gallery-masonry-item-wrapper {
    height: auto !important;
}

to this

.gallery-masonry-item-wrapper {
    height: auto !important;
	margin-bottom: 20px !important;
}

After using this code to have only 1 row on masonry gallery on mobile view: 

/* Masonry one item on mobile */
@media screen and (max-width:767px) {
    .gallery-masonry-item-wrapper {
    height: auto !important;
    margin-bottom: 30px !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 10 !important;
    padding-right: 10 !important;
}
}

The Button "Next" started showing in the middle of the gallery instead of being on the bottom before the footer.

Also the footer disapeared.

The link to the page is: https://www.henriqueisidoro.com/osloapparel

I see you solved with new code?

@media screen and (max-width: 767px) {
    .gallery-masonry-item-wrapper {
        height:auto !important;
        margin-bottom: 30px !important
    }

    figure.gallery-masonry-item {
        position: relative !important;
        width: 100% !important;
        transform: unset !important
    }

    .gallery-masonry-item-wrapper {
        height: auto !important
    }

    .gallery-masonry .gallery-masonry-item[data-loaded] img {
        width: 100% !important
    }

    .gallery-masonry {
        padding-left: 10 !important;
        padding-right: 10 !important
    }

    .gallery-masonry-wrapper.gallery-masonry-list--ready {
        height: auto !important
    }
}

Hi, ive been searching the whole forum. How i can set the masonary grid to 3 column in mobile view while keeping the same 0px gaps between images as in the desktop view. also how can i make more than one column for the projects mobile view in a portfolio page ?

as you can see i applied the code below i found on another thread but it totally dismantle the initial design.

@media screen and (max-width:640px) {
figure.gallery-masonry-item {
    width: 33.3% !important;
    float: left !important;
    transform: unset !important;
    position: initial !important;
    display: block!important;
    padding: 0px!important;
    box-sizing: border-box;
}
figure.gallery-masonry-item img {
    width: 100% !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
}


my website : https://ahmadtaha.com/

On 4/7/2023 at 5:19 PM, ahmadtaha said:

Hi, ive been searching the whole forum. How i can set the masonary grid to 3 column in mobile view while keeping the same 0px gaps between images as in the desktop view. also how can i make more than one column for the projects mobile view in a portfolio page ?

as you can see i applied the code below i found on another thread but it totally dismantle the initial design.

@media screen and (max-width:640px) {
figure.gallery-masonry-item {
    width: 33.3% !important;
    float: left !important;
    transform: unset !important;
    position: initial !important;
    display: block!important;
    padding: 0px!important;
    box-sizing: border-box;
}
figure.gallery-masonry-item img {
    width: 100% !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
}


my website : https://ahmadtaha.com/

You try checking on live mode. It looks fine to me

On 4/10/2021 at 6:21 PM, tuanphan said:

Hi. Add to Design > Custom CSS

/* Masonry one item on mobile */
@media screen and (max-width:767px) {
	.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}

 

Hi @tuanphan can I please also add a 20px margin on both sides of the images? 

My web is: https://www.gastonduflos.com/portfolio/4-pines-mural-design

Use this code

/* Masonry one item on mobile */
@media screen and (max-width:767px) {
	.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: calc(100% - 40px) !important;
    transform: unset !important;
    margin-left: 20px;
    margin-right: 20px;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}

3 hours ago, GastonDuflos said:

Hi @tuanphan can I please also add a 20px margin on both sides of the images? 

My web is: https://www.gastonduflos.com/portfolio/4-pines-mural-design

6 hours ago, tuanphan said:

Use this code

/* Masonry one item on mobile */
@media screen and (max-width:767px) {
	.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: calc(100% - 40px) !important;
    transform: unset !important;
    margin-left: 20px;
    margin-right: 20px;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}

 

 

Hi @tuanphan thank you very much for your assistance. Unfortunately didn't work! 

My web is: https://www.gastonduflos.com/portfolio/4-pines-mural-design

On 10/3/2023 at 5:26 PM, GastonDuflos said:

Hi @tuanphan thank you very much for your assistance. Unfortunately didn't work! 

My web is: https://www.gastonduflos.com/portfolio/4-pines-mural-design

The code is missing 2 symbols, you can use this new code

/* Masonry one item on mobile */
@media screen and (max-width:767px) {
	.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: calc(~"100% - 40px") !important;
    transform: unset !important;
    margin-left: 20px;
    margin-right: 20px;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}