0

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;
}
0

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%;
 } 
}
| improve this answer | |
  • Yes!! Success!! Thank you. – pttony Jul 30 at 1:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.