Code to make gallery single column in mobile view

I am using the following bit of code on pages of my site which contain a gallery, so that in mobile view the gallery goes to a single column (rather than two coloumns, which seems to be the default):

<style> @media screen and (max-width:800px) {.gallery-grid-wrapper {grid-template-columns: repeat(1,1fr) !important; grid-row-gap: 1vw !important;}} </style>

The code works well on every page except the homepage. I think this is because on the homepage I am using the 'masonry' gallery, as opposed to the 'simple grid' that I am using on all the other pages. I have tried adjusting the code above but I can't get it to work. Any ideas?

Can you share the website URL and the page and section you want this to apply to? Thanks!

Hi

https://www.matthodgesdesign.com/

It's the homepage – the gallery is the whole page, basically.

Thanks

That worked nicely – thanks very much!

On 1/15/2023 at 9:44 AM, tuanphan said:

Use this code for masonry

/* 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;
}
}

 

One other thing – my social logos in the footer are right-aligned, but when it switches to mobile view I would prefer them to be centred. Is there any code to fix that?

On 1/17/2023 at 9:33 PM, matthewhodges said:

One other thing – my social logos in the footer are right-aligned, but when it switches to mobile view I would prefer them to be centred. Is there any code to fix that?

It looks already centered now?

All good – I emailed you and you sent me the right code.  Many thanks!

Thanks for the code, how do I get the images to fill the screen width wise? Currently they are left aligned and small, some other formats fill the screen. See attached screenshot...

On 2/13/2024 at 5:09 AM, Arcanjo1 said:

Thanks for the code, how do I get the images to fill the screen width wise? Currently they are left aligned and small, some other formats fill the screen. See attached screenshot...

Can you share link to this page?

@tuanphan - Thanks for this code for a stacked 1-column mobile view for Masonry galleries, which works great! However, I, too, am looking to make the images go full width on mobile. The spacing is otherwise very awkward-looking and uneven, as masonry grids allow for images of varying dimension ratio's--portrait, landscape, square, etc. Making them all full-width would make these uniform, just with varying heights. Please see https://sdibeta.squarespace.com/gallery (pwd: anyone) on mobile:

I'm unsure how to target width here, since inspecting the CSS, the mobile masonry item (.gallery-masonry-item)  is already set to a width of 100% in your code, but this is being overridden somehow.

Add these lines of code before the final bracket:

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

@Ziggy - brilliant! This worked! Thanks so very much.

This worked like a charm! Much appreciated!