:root{ --meme-wsize: 50vw; --meme-vsize: 26vw; } .page{ background:linear-gradient(rgb(189, 211, 255), rgb(55, 15, 141)); z-index:2; } .Liste{ width:100%; height:100vh; overflow: scroll; } /*.memeContainer { border-color: black; border-width: 1px; border-style: solid; width:25%; padding-bottom: 25%; float: left; margin : 5%; height: 0; } .meme{ width: 100%; left: 0; }*/ .row { display: flex; flex-wrap: wrap; padding: 0 4px; } /* Create deux equal columns that sits next to each other */ .column { flex: 33%; max-width: 33%; padding: 0 4px; } .column img { margin-top: 8px; vertical-align: middle; width: 100%; height: auto; } /* 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%; } }