This tutorial enables you to change the amount of columns your gallery displays at different screen widths.
Here’s the demo gallery which displays 4 columns at screen widths above 800px.
In this example we’ll reduce the columns to 2 on mobile devices when the screen width reduces below 800px.
When the screen width hits 480px, we’ll also change the columns from 2 to 1 like this:
Here’s the CSS you can add to your existing Media Queries near the end of your child themes style.css file and modify according to your own needs: