Hey Folks! In 7.1 galleries are set up differently than they used to be in 7.
Long story short, it is no longer a width % or px issue, it's actually a setting that says how many are being displayed in a row.
The snippet below will specify the # of columns displayed - 2 in this example. And to apply this only to a gallery in one specific page section, you can use that section id first.
So... this code to target all grids galleries:
@media only screen and (max-width: 640px) {
.gallery-grid-wrapper{ grid-template-columns: repeat(2, auto)!important;}]
Or this version for just the one section:
@media only screen and (max-width: 640px) {
[data-section-id="123456789"] .gallery-grid-wrapper{ grid-template-columns: repeat(2, auto)!important;}}
One SUPER important thing I want to mention - i am sure you all noticed that we get a mobile preview and a desktop preview... and thats it! It turns out that 7.1 was designed with one main break point at 991; so double check when your galleries are moving down to one and adjust that 640 accordingly ♥ #protip
Anywho, hope that helps! Let me know how it goes 🙂