Gallery section: add space between columns + mobile adjustments

Hi everyone, I have a gallery section; a masonry grid with two columns, and would like to override the gutter between the columns. In the edit section box it can be set to a maximum of 150 but I want even more space.

I managed to increase the inset of the section using the code below – thanks @tuanphan But I need help to remove the extra inset on mobile. Also, is it possible to have just one column on mobile?

Thanks for any help!
Marte

/* Gallery section - Masonry padding */
.gallery-masonry {
    padding-left: 10vw !important;
    padding-right: 10vw !important;
}

Can you share the URL of the page you are trying to do this on?

https://www.ucrf.oglilleby.no/home-gallery

PW: UCRF-test

This will mean the padding only applies to desktop:

/* Gallery section - Masonry padding */
@media only screen and (min-width:750px) {
  .gallery-masonry {
    padding-left: 10vw !important;
    padding-right: 10vw !important;
 }
}

Thanks @Ziggy that worked!

Now I just need to have only one column on mobile. Plus add the spacing between columns on desktop.

Do you have a clue?

On 10/18/2022 at 4:39 AM, martelil said:

 that worked!

Now I just need to have only one column on mobile. Plus add the spacing between columns on desktop.

Do you have a clue?

To change to one column on mobile, add this CSS

/* Masonry to grid mobile */
@media screen and (max-width:767px) {
	.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(1,1fr) !important;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: 100% !important;
}
}

Thank you, that worked perfect @tuanphan!

Can you help med with overriding the max default 150 gutter between the two columns in the masonry grid as well?

On 10/24/2022 at 4:11 PM, martelil said:

Thank you, that worked perfect @tuanphan!

Can you help med with overriding the max default 150 gutter between the two columns in the masonry grid as well?

On mobile or desktop?

With desktop, have you tried adjusting this yet?

Yes I set it to max 150 on desktop, but I'm looking for an even bigger spacing between the columns. Mobile works fine with the code for one column.

On 10/18/2022 at 12:18 AM, martelil said:

https://www.ucrf.oglilleby.no/home-gallery

PW: UCRF-test

The url doesn't work now. Can you check it again?

Oh I'm sorry, changed the URL to this: https://www.ucrf.oglilleby.no/home-gallery-copy

On 10/31/2022 at 9:13 PM, martelil said:

Oh I'm sorry, changed the URL to this: https://www.ucrf.oglilleby.no/home-gallery-copy

Thank you. But I Just checked, no way to control this with code.

Thanks anyway, then I know.