Responsive order summary card with Flex box

Community feedback

• 

  Ed-dyb Abdelilah•1,560

  @eddybproPosted over 1 year ago

  Hi, Mahmoudamin11

  Congratulation on finishing this challenge, I hope it was fun.

  Here are some improvements that might be helpful:

  • CSS code:

  @media (max-width: 430px)
  main {
  /*I think its better to change the value of 'width' to 95%*/
  width: 95%;
  }
  

  It's more professional to add classes to your HTML elements, That makes it easy to identify the element easily in CSS. And you may need to do some tasks later with the class in JS (when the project gets more complex)

  • Example:

  <button class='payment-btn'>Proceed to Payment</button>
  

  You may need to add some hover effect to the button:

  .payment-btn:hover{
  /*some code*/
  }
  

  Tip

  Use relative values rem em instead of absolute values px that help make your website responsive in different screen sizes.

  Good luck in your jouney

  Marked as helpful

  0

  ---

  

  Mahmoud_Amin•540

  @Mahmoudamin11Posted over 1 year ago

  @eddybpro thank you for your feedback but i added hover to the button click on preview website better and iamn't interested in adding too much classes cause it's sometimes time-wasting like (i have only one button so no need for class) yeah i used rem and em in the code and also px again thank you for ur helpful feedback

  0