admin管理员组

文章数量:1330636

I'm using a 4 column native wordpress gallery on my homepage: / (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;
}

I'm using a 4 column native wordpress gallery on my homepage: https://www.peace-ed-campaign/ (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;
}
Share Improve this question edited Jul 30, 2020 at 0:13 Jacob Peattie 44.1k10 gold badges50 silver badges64 bronze badges asked Jul 29, 2020 at 18:37 pttonypttony 1
Add a comment  | 

1 Answer 1

Reset to default 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%;
 } 
}

本文标签: making wordpress gallery responsive