No replies
ppowell777
ppowell777's picture
Offline
newbie
Washington, DC
Last seen: 5 weeks 21 hours ago
Washington, DC
Timezone: GMT-4
Joined: 2023-04-29
Posts: 1
Points: 2

I have a page that displays a gallery of images, using CSS Flexbox layout to display them:

Gallery is here

The page displays just fine in Chrome and Firefox, however, it displays improperly in Edge inasmuch as the images are too close together. I read something about justify-content: space-evenly not fully working in Edge, but I couldn't figure out any kind of workaround to fix the issue.

.gallery, .game {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    align-content: space-around;
    text-align: center;
    min-height: 0px;
}
 
/* DEFAULT FOR PCs AND NON-TOUCHSCREEN DEVICES */
.gallery-thumb, .game-thumb {
	margin: 0.5%;
	margin-left: 0;
	margin-right: 0;
}

Ironically the Game page displays just fine in all browsers Game is here

Is there anything I need to do to handle this specifically for Edge and specifically for the Gallery page?

Thanks