Have you ever noticed that default WordPress galleries aren’t responsive? When you set the number of columns for your gallery on the gallery settings modal, the number of columns that you initially assign are static. Ideally, when the screen size changes, so would the number of columns– breaking away until the smallest screen has one column of beautiful images in a little vertical chorus line.
Can’t I fix the issue with JavaScript?
It is possible to write a bit of creative Javascript to switch the column class assigned to the gallery based on screen size. Unfortunately, if a user doesn’t have Javascript enabled, or is unable to load a script because of bandwidth constraints, your creative Javascript might not fire. That’s why it makes more sense to use the @media css rule.
How to make your WordPress gallery responsive
Let me be clear, this is a temporary solution… a hack. But, because the hack doesn’t involve changing theme files or editing core (just a bit of CSS), it seemed like a decent temporary solution. I’ve also only tested this on Divi and Genesis-based themes, so please leave a comment if you test this out, and make sure to include your theme name.
@media only screen and (max-width: 680px) {.gallery-item {width: 100% !important;}.gallery .gallery-item img {
width: 100%;
}}
So what does the code do?
Line 1 says that the rule should only be executed if the page is currently displayed on a screen (or window) less than 680px wide.
The next bit re-defines the default gallery-item class setting the width property to 100%, while !important tells the browser to allow that rule to supersede any other definition of width for the class gallery-item.
The last part re-defines the gallery and gallery-item class’s img property to make sure the actual image stretches to 100% of the screen.
That’s it. I threw this code in the Jetpack Custom CSS module, and it worked like a charm. See the hack in action here, and tell me what you think in the comments!