Mobile(375px) & Desktop(1440px) Four Card Feature with Sass & CSS Grid

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  Hey Elena, nice work on this challenge! As Gerben mentioned, don't feel like you need to build pixel-perfect projects. Getting it close enough to the design is absolutely fine and in today's world of wide-ranging device sizes you don't need to worry too much about complete accuracy for the given design sizes.

  The reason we provide designs at 375px and 1440px is that those are two of the most common device screen sizes and therefore design are very common design sizes to use for mobile and desktop. On the premium challenges, we also add in 768px for tablet.

  Your media queries are looking absolutely fine. It's great to see you using min-width instead of max-width. One thing you might want to look into with Grid is using grid templates areas, as they can lead to cleaner code.

  Also, avoid using position: absolute; to position large groups of content. At the moment, your cards overlap the heading text on my screen because of the position: absolute; on the .component-container class.

  I hope this helps. Let me know if you have any questions. Keep up the great work!

  1

  ---

  

  Elena Stagg•220

  @elenastaggPosted over 4 years ago

  @mattstuddert Hi there, this is all super useful, thanks for letting me know and for taking a look at my code :-)

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  @elenastagg no problem!

  0
• 

  Gerben Dol•3,115

  @GerbenDolPosted over 4 years ago

  Hey! I think you should just drop the idea of having your website be "pixel perfect". The strength of a responsive website is working on any screen width!

  I think you're doing pretty good on the media queries right there! Try and keep as many styles that are shared between mobile and desktop outside of any media query and add the specific changes you need in the media query to make sure you don't get too much duplicate code.

  Keep up the great work!

  1

  ---

  

  Elena Stagg•220

  @elenastaggPosted over 4 years ago

  @GerbenDol Hey, thank you so much for the feedback. Someone on my last challenge suggested pixelperfect so I gave it a shot but I have to admit it was a bit tedious.

  We're only given screensizes 1440px & 375px for the challenge which confused me a bit as they seem quite irregular compared to Chrome screen sizes - do you have a standard mobile/tablet/desktop size you work to?

  Thanks for the feedback on the media queries, good to know!

  0

  

  Gerben Dol•3,115

  @GerbenDolPosted over 4 years ago

  @elenastagg You should see these dimension just as an indicator of what device that look of the layout would be displayed on.

  So it's up to you as a developer to think about what will happen in between.

  In this case you might want 3 different looks:

  • On really narrow screens (you decide from what point the screen gets too narrow) display all cards underneath each other
  • On screens that are a bit wider you might want to display 2 cards next to each other, since 1 is too stretched and 3 is too tight
  • On bigger screens display the design in the way it's in the 1440px design

  I can see how this might be a bit confusing at first! If you'd like to chat about it a bit more just hit me up on Slack and I'll be happy to help!

  0

  

  Elena Stagg•220

  @elenastaggPosted over 4 years ago

  @GerbenDol Thank you! :-)

  0