@Junbol
Posted
I have always struggled with the media queries semantics. For example @media (min-width: 450px) {..... books and tutorials explain this using the word max : like :"Apply the following CSS rules to screens that are at max 450 pixels ." and my little artist neurons go nuts min, max 🤪. So here is simpler way to put it the comments: /*Apply these rules to screens that are at least 450 pixels wide or larger. */ and I always add it that to straight my cell back again. So dont mix min with max , max leave to use @media (max-width: 1080px) : /Apply these rules to screens that are 1080 pixels wide or smaller."/ Grid land Flexbox are a tough nut craker it seems daunting at first, but once you've got it, it's a game-changer for layout design. But familiarize with them a lot before use a framework like Tailwind (forget about Bootstrap and Foundation) or ChackaUI(React) so you can fly with them 🚀 For Flexbox declare you classes with display: flex to be able to enter your magic code and don't forget about playing around with Froggy and Zombies. Forget about all that nonsense with Grid just use fractions with display:grid and grid-template-columns: 250px repeat(1, 1fr); (for simple grids) and template grid-area combine with grid-template-area (for complex ones)