Fylo dark theme landing page CSS Grid and Flexbox

Community feedback

• 

  Mark Mitchell•1,820

  @markup-mitchell

  Posted almost 5 years ago

  Hi @hammercait! I think media queries are one of those things that seems totally baffling... until the penny drops and then you wonder why you found it so hard (like every new coding concept 😅). I struggled with them, and even now I only use them in a very minimal way.

  You can think of them as conditional statements for CSS:

  @media (min-width: 768px) { body { background-color: red; }; }

  means "if (viewport is 768px or more) then apply style (body { background: red})"

  I suggest you only use min-width until you really need something else (I rarely do).

  This goes hand-in-hand with the "mobile first" approach because it's easier/better, for various reasons, to implement mobile-friendly designs first, then expand them to work on tablet and desktop.

  Try starting your next challenge with the mobile design: develop it in devtools with the device emulator set to iPhone6/7/8 (or 375px). When the mobile version is finished you can start adding media queries to realise the desktop (or tablet) design.

  10