Four Card Feature Section

Community feedback

• 

  archdron•65

  @archdron

  Posted over 5 years ago

  Greetings! I'm a beginner in this, too, so take what I suggest with a grain of salt.

  1. Either scale the layout proportionally or hardcode card dimensions and position. Otherwise, your layout will be butchered by slight differences in viewport size (e.g., see the automatic screenshot), which is not exactly what you want.

  2. Mind the details like letter spacing, margins, shadows, etc., if you deviate from the mock-up in some respects, make sure the deviation is well-justified.

  As a first try, it looks fine to me, although I have little to no understanding of what you did in the CSS :D

  10
• 

  

  Matt Studdert•13,611

  @mattstuddert

  Posted over 5 years ago

  Congrats on submitting your first challenge, Andrew! Your HTML code is looking really good and it's nice to see you've used CSS Grid for the layout. Here are a couple of suggestions after taking a look at your code:

  • You've set your media query to max-width: 500px; which means that the content gets very squashed at 501px up to mid tablet size. You might want to do a little review of your responsive styles to account for large mobile and tablet sizes.
  • Have you ever tried using min-width media queries instead of max-width? It's quite a common workflow with front-end developers to use them and work mobile-first. It can often lead to less CSS code and has the benefit of loading in fewer styles for mobile users, which can be a nice performance gain.

  You've done a really good job. Keep up the great work!

  00