Adaptive Flexbox Order Summary Component

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello there! 👋

  Congratulations on finishing this challenge! 🎉

  I recommend adding a container inside the card element as @Bayoumi-dev has suggested to you. This way, you can add padding to the container element and then remove the margin from each element.

  I have a few suggestions for this solution.

  • I recommend making the body element as the flex container of the card element. This way, you can remove the display element.
  • The music icon is a decorative image. So, leave the alt empty.
  • The "Proceed to payment" button should have type of button (not a submit button). It is not wrapped by form element. Also, what do you think is going to happen after the users click the button?
  • I recommend only treating the body element as the page of the site. I suggest leaving the html element because the html element is connected with the user's setting (such as font-size, etc).
  • Prefer unitless numbers for line-height values to avoid unexpected results. The MDN documentation explains it well.👍

  That's it! Hope you find this useful!

  Marked as helpful

  3

  ---

  

  Kapline•140

  @TrueKaplinePosted over 2 years ago

  @vanzasetia Thanks for your recommendations

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @TrueKapline You're welcome! 👍

  0
• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  Hey Kapline,

  My suggestions:

  • Wrap all the content without the image with the body element <div class="body"> and then give the body element the padding.

  <img src="images/illustration-hero.svg" alt="Music image" class="main_image">
  <div class="body">
     <h1></h1>
     <p></p>
     <div class="plan_card">
          //...
     </div>
     <button></button>
     <a href="#" class="cancel_button"></a>
  </div>
  

  • Instead of adding border-radius for the card and the image, Add border-radius: 20px; and overflow:hidden; to the card only:

  .card {
      background-color: hsl(0, 100%, 100%);
      border-radius: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      box-shadow: 0 10px 15px hsl(245, 83%, 68%, 10%);
  
      overflow: hidden;    /* <--- Add */
  }
  
  .main_image {
      /* border-top-left-radius: 20px;       <--- Remove */
      /* border-top-right-radius: 20px;       <--- Remove */
  }
  

  Hope this help!... Keep coding👍

  Marked as helpful

  2

  ---

  

  Kapline•140

  @TrueKaplinePosted over 2 years ago

  @Bayoumi-dev Thank you!

  0