Responsive Order Summary using Flexbox

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Luis! 👋

  Good effort on this challenge! I love the overall looking of the site, it looks similar to the design. Overall the HTML markup looks great and has no accessibility issues have been reported.

  Anyway, here is some feedback,

  • I would recommend having one CSS file instead of having three CSS files. Having one CSS file is makes sense for this challenge since it is a small project. Also, having one CSS file would speed up the loading speed of the site.
  • I also would recommend that you are writing the styling using the mobile-first approach. It often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles.
  • I notice that there's no href attribute for the Cancel Order link.
  • Always specify the type of the button. In this case, set the type of them as type="button". It's going to prevent the button from behaving unexpectedly (like submitting).
  • Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs.
  • I would suggest using max-width and not specifying the height of the card. By doing that, you make the card more responsive.

  Overall, you have done good work. You are using semantic HTML markup and get no issues from Frontend Mentor automatic report. Also, if you have one CSS file, it does not only boosts the loading speed but also prevents you from writing the same styling.

  I hope this helps! Keep up the good work! 👍

  Marked as helpful

  1

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @LuisRoft About your question, the SVG background should not have full height and if see the design, the SVG background is not full height either. So, nothing to worry about. 🙂

  0

  

  Luis Velasco•10

  @LuisRoftPosted over 2 years ago

  Hi @vanzasetia, thanks for the feedback :)

  1

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @LuisRoft You're welcome! 😁

  1
• 

  AhmedAlasyotY•110

  @Ahmed666313Posted over 2 years ago

  Hey, make sure the code's right and think first before you do it.

  0