admin管理员组

文章数量:1330138

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;
}
  • gallery
  • responsive
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

版权声明：本文标题：making wordpress gallery responsive 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742222611a2435548.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。