Order Summary Component

Community feedback

• 

  Rafael Elias•290

  @RafisEliasPosted over 2 years ago

  Amazing work man, to fix the alignment problem you can do somethings:

  I: in the <div id="neste"></div> add in the css the:

  ...
  #neste {
    display: flex; /* <-- this will make the div alignment horizontally */
    align-items: center; /* <-- this will make the child elements alignment to the center of the div */
    gap: 16px; /* <-- this will add a spacing between the child elements */
  }
  

  you can remove the margin-right of the Music Icon now you are using the gap

  II: In the .plan-info class you can add the align-items: center;

  III: You can also remove the margin of the <p> tag:

  ...
  p {
    margin: 0
  }
  

  i hope this can help you.

  Marked as helpful

  1

  ---

  

  Daniel Blum•170

  @dnlblumPosted over 2 years ago

  @RafisElias Rafael, thank you very much for investing some time to review the code and give me some tips. Your suggestion did work great. But I just figured out that in the css code was calling the ID using ".nested" instead of using "#nested". So all the attributes I tried wasn't been applied to layout. Thank you again.

  0
• 

  Enmanuel Otero Montano•2,155

  @Enmanuel-Otero-MontanoPosted over 2 years ago

  Hello Daniel!

  Consider using this structure (it's your modified HTML code)

  <div id="neste">
       <img class="plan-icon" src="images/icon-music.svg" alt="Music Icon Illustration"> 
       <div class="price">
           <p class="bold">Annual Plan</p>
           <p>$59.99/year</p>
       </div>
       <p><a class="float-right" href="#">Change</a></p>
  </div>
  

  Then apply to the div with the nested id the following properties

  #neste {
        display: flex;
        align-items: center;
        justify-content: center;
      }
  

  You'll need to apply some margin-left to the "p" tag that wraps the link and some height and width to the div with the nested id. All this until the desired design is achieved.

  hope this helps

  Cheers

  1

  ---

  

  Daniel Blum•170

  @dnlblumPosted over 2 years ago

  @Enmanuel-Otero-Montano Thank you very much for investing some time to review the code and give me some tips. I just figured out that in the css code was calling the ID using ".nested" instead of using "#nested". So all the attributes I tried wasn't been applied to layout. Thank you again.

  0