Hi,
I added a gallery using the Graphene Navbar Header action hook. Then I noticed that the gallery does not scale down very well in smaller screens.
With these Additional CSS settings I managed to get much nicer output:
.gallery-item {
margin: 0 0 0 !important;
padding: 0;
}
.gallery-item img {
width: 100%;
height: auto;
}
@media screen and (max-width: 767px) {
.gallery-item {
width: 25%;
max-width: 25%;
height: auto;
}
}
The added settings seem to work well with Firefox (Windows, Linux, Android), Chromium (Windows ,Linux) and Micosoft Edge. At the moment I do not have any Apple devices.
I’ve tested the settings with six-column gallery layout and with 1-6 images.
I also added a gallery to a page to see that my changes are global.
Comments?