Using flexbox for gallery layout.

master
gamerdonkey 2021-02-02 04:35:31 +00:00
parent 3c6654f78a
commit baba1ecfda
1 changed files with 3 additions and 3 deletions

View File

@ -2,9 +2,9 @@
html { background-color: #2c3e50; color: #eee; } html { background-color: #2c3e50; color: #eee; }
.wrapper { max-width: 1286px; margin: 0 auto; } .wrapper { max-width: 1286px; margin: 0 auto; }
a { color: #00aced; } a { color: #00aced; }
ul.gallery { background-color: #eee; padding: 0; } ul.gallery { display: flex; flex-flow: row wrap; justify-content: space-evenly; background-color: #eee; padding: 0; }
ul.gallery li { display: inline-block; list-style-type: none; outline: 2px solid #00aced; background-color: #000; } ul.gallery li { display: inline-block; list-style-type: none; width: 32%; margin-top: 0.8em; outline: 2px solid #00aced; background-color: #000; }
ul.gallery li a { text-decoration: none; } ul.gallery li a { text-decoration: none; }
ul.gallery li a:hover { color: yellow; } ul.gallery li a:hover { color: yellow; }
ul.gallery li p { font-size: large; text-align: center; color: #fff; } ul.gallery li p { font-size: large; text-align: center; color: #fff; }
ul.gallery li img { max-width: 100%; background-color: white; } ul.gallery li img { max-width: 100%; background-color: white; }