making wordpress gallery responsive

Question

I'm using a 4 column native wordpress gallery on my homepage: https://www.peace-ed-campaign.org/ (see just below the slider).

When viewed on mobile, the 4 columns/images remain side-by-side and shrink to the point of being useless. I'd like the mobile responsive to adjust to either 2 or 1 image...

I've seen several threads here on this... but all answers date back to 2018. None seem to work anymore. Does anyone have any suggestions?

Other threads I've tried:

How to Make Wordpress Default gallery responsive on mobile?

Making WordPress Gallery (.gallery-item) Responsive?

Currently trying this with no luck:

/* For displaying single column on mobile */

@media only screen and (max-width: 480px) {
 .gallery-columns-4 .gallery-item {
     width: 100%;
 }
}

.gallery-columns-4 .gallery-item:nth-child(4n+1) {
     clear: none;
}

Answer 1

Maybe you need to set max-width Just add max-width:100% below your code

@media only screen and (max-width: 480px) { 
 .gallery-columns-4 .gallery-item { 
   width: 100%;
   max-width: 100%;
 } 
}