Project tracking intro component - using Sass and Flexbox

Hey Argel, I feel your pain. I used to get overwhelmed with trying to cover so many device breakpoints that my CSS would be filled with them lol. From my experience, I found that it was easier for me to cover only like 3 or 4 major breakpoints. Like (smartphones/iPhones, tablets, and desktops) instead of covering every single breakpoint I could think of.

I use this website when I'm working on media queries: https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/

Hope this helps! :)

Hey Argel, great work with this challenge! When it comes to defining breakpoints, I tend to have a few pre-defined breakpoints (500px, 768px and 1240px), but then I do add in more custom breakpoints if the content looks wrong at a specific screen size.

I also only use min-width media queries for layout-related changes, which I find simplifies my CSS code quite a bit. I see you use a mixture of min-width and max-width, which could be making your CSS slightly less manageable.

I'd recommend trying to use just min-width queries on your next project and see if that helps.

Then you can change the browser size to make sure the content scales and changes at the right points. After that you can double-check everything with the device emulator in the dev tools to check common device sizes.

Having the number of breakpoints that you've got isn't inherently bad, as long as you know exactly why each one is there. Obviously, fewer breakpoints typically mean more maintainable code, but the content still has to look right.

You'll see that the content overlaps around 800px on your solution here, so there is a little bit of work still to be done on the responsive side.

Let me know if you have any more questions, keep up the great work!