ppowell777
Coder
I am trying to perform a specific CSS action on a CSS class if you are using the Edge browser, however, the code I work fails to detect the CSS property that I thought was specific to Edge:
In case you are wondering about application, it can be found here My Gallery Page (the view is correct in Chrome and Firefox but incorrect in Edge).
I am totally stumped as to what to do, especially since the issue in the CSS flexbox is only specific to Edge and nowhere else (I thought of a quick fix involving padding in between each image, but CSS @supports does not work for me).
Please help; this is a definitely live display issue for Edge users to my page
Thanks
CSS:
.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;
}
@supports (-ms-box-sizing: border-box) {
[class*="gallery-thumb"] {
padding-left: 2px;
padding-right: 2px;
}
}
In case you are wondering about application, it can be found here My Gallery Page (the view is correct in Chrome and Firefox but incorrect in Edge).
I am totally stumped as to what to do, especially since the issue in the CSS flexbox is only specific to Edge and nowhere else (I thought of a quick fix involving padding in between each image, but CSS @supports does not work for me).
Please help; this is a definitely live display issue for Edge users to my page
Thanks