Project tracking intro component - using Sass and Flexbox

Community feedback

• 

  P

  AjeaS•735

  @AjeaSmithPosted over 5 years ago

  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! :)

  1

  ---

  

  argel omnes•1,800

  @argelomnesPosted over 5 years ago

  @AjeaSmith Thanks! I'll read through before continuing on my current challenge.

  0

  

  argel omnes•1,800

  @argelomnesPosted over 5 years ago

  @mattstuddert I signed up. thanks!

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 5 years ago

  @AjeaSmith that's a great resource, Ajea! @argelomnes here's another resource, which is great if you'd like to learn more about building responsive sites: https://www.udacity.com/course/responsive-web-design-fundamentals--ud893.

  0
• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 5 years ago

  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!

  0

  ---

  

  argel omnes•1,800

  @argelomnesPosted over 5 years ago

  @mattstuddert cool! I'll start with those 3 next time. Looking back at my code, I have only used max-width once. I think I can get sticking min-width to work. Thanks again!

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 5 years ago

  @argelomnes you're welcome! I hope it helps simplify the process for you.

  0