/* MAKE SURE THIS IS LOADED *AFTER* MAIN STYLESHEETS! ORDER MATTERS! */ @media screen and (max-width: 1600px) { body { max-width: 80%; } } @media screen and (max-width: 1400px) { body { max-width: 80%; min-width: 700px; } } @media screen and (max-width: 800px) { body { max-width: 100%; font-size: initial; text-align: center; } nav { flex-direction: column; } ul.navbar { display: flex; flex-direction: column; justify-content: center; align-items: center; } .navbar span { display: none } ul.navbar li { margin: 0.3em 0; } #array { grid-template-columns: repeat(1, 1fr); } }