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!