InsulineSodarameme/css/index.css

65 lines
1.2 KiB
CSS
Raw Permalink Normal View History

2023-01-04 18:10:14 +01:00
2023-01-05 20:52:06 +01:00
:root{
--meme-wsize: 50vw;
--meme-vsize: 26vw;
2023-01-04 18:10:14 +01:00
}
2023-01-05 20:52:06 +01:00
.Liste{
width:100%;
height:100vh;
overflow: scroll;
}
2023-01-06 16:05:00 +01:00
.memeContainer {
2023-01-06 12:21:53 +01:00
border-color: black;
2023-01-06 16:05:00 +01:00
border-width: 3px;
border-radius: 5px;
2023-01-06 12:21:53 +01:00
border-style: solid;
2023-01-05 20:52:06 +01:00
margin : 5%;
2023-01-06 16:05:00 +01:00
margin-right: 2.5%;
padding: 16px;
background: rgba(255, 255, 255, 0.527);
2023-01-05 20:52:06 +01:00
}
.meme{
2023-01-06 12:21:53 +01:00
width: 100%;
2023-01-05 20:52:06 +01:00
left: 0;
2023-01-07 01:49:49 +01:00
border-radius:10px;
2023-01-06 16:05:00 +01:00
}
2023-01-06 12:21:53 +01:00
.row {
display: flex;
flex-wrap: wrap;
2023-01-06 16:05:00 +01:00
padding: 0 1px;
2023-01-06 12:21:53 +01:00
}
/* Create deux equal columns that sits next to each other */
.column {
2023-01-06 12:29:10 +01:00
flex: 33%;
max-width: 33%;
2023-01-06 16:05:00 +01:00
padding: 0 1px;
2023-01-06 12:21:53 +01:00
}
.column img {
vertical-align: middle;
width: 100%;
2023-01-06 12:29:10 +01:00
height: auto;
2023-01-06 12:21:53 +01:00
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column {
flex: 100%;
max-width: 100%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
2023-01-05 20:52:06 +01:00
}