Flexbox 3 Column Preview Card Component

Community feedback

• 

  Marcos Farias•50

  @MarcosFarias21Posted over 2 years ago

  I would suggest you to search more about breakpoints and media queries. I personally set my breakpoint at the width of 1024px(you can convert it to "em") so devices with a viewport width higher than 1024px(64em) desktop design of the page will be displayed. As well as devices with a viewport width lower than that will have the mobile design of the page. Why 1024px?, well we have to consider the tablets too. But this value can vary depending on how you want the content to be fit on the page.

  Marked as helpful

  1

  ---

  

  Ashley Serrano-Ziel•70

  @aszcodingPosted over 2 years ago

  @MarcosFarias21 That makes sense! I was trying to make the breakpoints match the provided screen width in the challenge, but you're right, it doesn't have to be exactly 375px. I didn't think about that. I'll update my media query to make it more fluid. Thank you for your insight!

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @aszcoding I would recommend writing the styling using the mobile-first approach which means that you are using min-width media queries instead of max-width. It often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles.

  1

  

  Marcos Farias•50

  @MarcosFarias21Posted over 2 years ago

  @vanzasetia Well said!. I always approach mobile design first and then apply media queries for desktop version changing some measurement properties and adding some unique desktop style touches.

  1

  

  Marcos Farias•50

  @MarcosFarias21Posted over 2 years ago

  @aszcoding of course!

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Ashley! 👋

  Congratulations on completing your first Frontend Mentor challenge! 🎉 Good effort on this challenge! 👍

  Some areas that can be done better.

  • There's no need to make the buttons to be postion: fixed;. It causes the buttons to overflow from the cards. Also, remove the width property from the button elements as well. It makes the buttons look so narrow.
  • Remove the height from the div styling. Most of the time, you want to let the content inside it control its height of it. It's because of better responsiveness and maintainability. Also, I would not recommend setting the hieight with % because as you can see in the design comparison, the cards don't have the correct height.
  • Use CSS to uppercase the text. The uppercased word in the HTML will be spelled by the screen reader (spelled letter by letter).

  For your information, the sizes on the style-guide.md have nothing to do with the media queries. They are telling you that "this is how your website should look like at these screen sizes". As frontend developers, we should keep making your website looks good in between those screen sizes.

  That's it! Happy coding! 😁

  Marked as helpful

  0

  ---

  

  Ashley Serrano-Ziel•70

  @aszcodingPosted over 2 years ago

  @vanzasetia Thank you so much for taking the time to review my project and for all of your feedback! I will make the updates you mentioned, and keep these things in mind for future projects as well.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @aszcoding No problem! Glad to help! 😄

  0