Fylo Landing Page - Solution!

Great work Daniel!

Regarding responsiveness, you should only use media queries if you realize the display for a particular screen size does not meet the design requirement or does not look good as the case may be. Note that by default HTML is responsive on all screens, devs are the ones that alter the responsiveness. There are some cases where you need to define media queries for all screen types but always ensure that your styling is optimal to ensure you only use media queries only when necessary.

Hey Daniel, excellent question you got there, because I used to do the same thing when I started working on these FEM challenges, and I'm now slowly going through my old challenges to make them more responsive.

I've tried many different things for accommodating different views, and nowadays I'd almost always put a width: min() on a container first, where I'd have different minimum values within min() that the browser can choose from. I saw Kevin Powell doing this in his channel and tried it out myself, and it just makes things a lot easier. It ensures that contents won't go pass a certain width and they can still go down to whatever size you choose. I'd still use a min-width though for the smallest optimal viewing size, just to make sure things don't go terribly out of form. My default for width: min() is usually width: min(91.5%, 80em) depending on how wide the space is around the component in the mobile design file. Aside from that I use max-width and clamp() a lot also. Try experimenting with these and see whether that works for you!