[Anonymous]

Anonymous

#50100

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?

[Syahir Hakim]

Syahir Hakim

#50110

Due to the unlimited number of possibilities on how action hook widget areas could be used, there might be minor issues like this when you use standard WordPress features (e.g. a gallery) inside an action hook widget area.

Typically, the only practical way to resolve it is by adding some custom CSS, which you have done.