Choosing Random Photos, display oddity

[Tomnibus]

I have my top category listings set to show a random photo from the sub-categories. However, when either the sub-categories don't have anything in them, or if it simply doesn't choose from what is in there. I get a blank folder. That is fine, however, the CSS displays overlapping outlines and the blank folders are huge. Is there a way to fix this?

Incidentally, one sub-category in "Contests" out of 7 does have 216 photos in it but apparently takes into account all the other folders and didn't choose one.

screenshot here:
https://i.imgur.com/cKkjWpo.png

[Tomnibus]

Here is something I notice inspecting the CSS.

When there is an image, it is linked to the image with an img tag with width/height of 222 x 167.

But when there is no image chosen it displays an SVG value and specifically calls out 380 x 285 as the size. If I could modify some preference to force 222 x 167 it would look normal. (added #gt# and #lt# to display the code below)

#gt# svg alt="Contests" class="ph-si ph-si-category pg-image c-Image c-Image--shaded" style="width:380px;height:285px" itemprop="thumbnail"><use xlink:href="#ph-si-category"#lt##gt#/use#lt##gt#/svg#lt#

[Jan]

Hi, test if some Phoca Gallery theme CSS is enabled in Phoca Gallery administration:

Administration - Phoca Gallery - Styles (check if theme standard or theme simple is enabled)

Jan

[Tomnibus]

Sorry for the delay.

I see "simple" and it has "main" nxt to it and I see "standard" without main.

https://imgur.com/a/QHkw1hg

When I unpublished simple and kept standard, it changed to the second image.

Still the Same. BTW, this only happens with the top level. The lower levels look fine as you see in third photo.

[Tomnibus]

I fixed it by adding this code to the "Simple" css:

svg.c-Image {
width: 224px !important;
height: 168px !important;
}