Order Summary Component

Community feedback

• 

  Rafael Elias•290

  @RafisEliasPosted over 2 years ago

  hello Elena

  I: You don'n need hardcoded the width of the <span> inside of your <button>:

  span {
    ...
    width: 166px; /* <-- you can remove this */
    ...
  }
  

  II: In the <h3>Cancel Order</h3> you can also remove the width:

  h3 {
    ...
    height: 20px; /*<-- you can remove this if you want */
    width: 108px; /*<-- you can remove this */
    text-align: center: /*<-- add this to align to the center */
    ...
  }
  

  also in the :hover pseudo class you don't need rewrite your whole css just what you want change, the same applies to media queries

  III: Consider using this structure (it's your modified HTML code), I just move the <p class="change"> out of the <div class="section4-div">

  <div class="card-section4">
    <div class="section4-div">
      <div class="music"></div>
      <div class="prise">
        <p class="anual-plan">Annual Plan</p>
        <p class="anual-prise">$59.99/year</p>
      </div>
    </div>
    <p class="change">Change</p>
  </div>
  

  in the `.card-section4``class:

  .card-section4 {
    ...
    height: 98px; /*<-- you can remove this (remember to remove this in the media query too) */
    width: 354px; /*<-- you can remove this (remember to remove this in the media query too) */
    justify-content: space-between; /*<-- change the center to space-between*/
    padding: 16px 20px; /*<-- add some space */
    ...
  }
  

  in the .section4-divclass:

  .section4-div {
    ...
    height: 48px; /*<-- you can remove this (remember to remove this in the media query too) */
    width: 306px; /*<-- you can remove this (remember to remove this in the media query too) */
    ...
  }
  

  in the .priseclass:

  .prise {
    ...
    height: 48px; /*<-- you can remove this (remember to remove this in the media query too) */
    width: 92px; /*<-- you can remove this (remember to remove this in the media query too) */
    margin-right: 94px;  /*<-- you can remove this (remember to remove this in the media query too) */
    ...
  }
  

  in the .changeclass:

  .change {
    ...
    height: 19px; /*<-- you can remove this (remember to remove this in the media query too) */
    width: 52px; /*<-- you can remove this (remember to remove this in the media query too) */
    ...
  }
  

  Normally is not good using hardcoded width and height so try avoid, i think will be good you learn about rem, em, vw, vh, etc.

  i hope this can help you.

  Marked as helpful

  0

  ---

  

  Elena Kuparadze•40

  @ItsmeeloPosted over 2 years ago

  @RafisElias Thanks you for your detailed feedback. I will edit all this. thank you so much <3

  0

  

  Rafael Elias•290

  @RafisEliasPosted over 2 years ago

  @Itsmeelo I'm glad this could help you

  0