Order Summary Component - Learning SASS

Community feedback

• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 11 months ago

  Hey, @eosook!

  Your project looks nice!

  About the section with the price, music logo and change button, I'm gonaa tell you how I've done it:

  • I created a flex container with 3 flex items.

  1. Item 1 is the music logo;
  2. Item 2 is anual plan + price;
  3. Item 3 is the change button;

  I organized the flex container using justify-content: space-between and gave the item 2 a margin-right: auto;.

  That pretty much solved the problem for me. Very simple.

  I hope it helps you too!

  Great job on this project!

  Marked as helpful

  1
• 

  Bryan Li•3,530

  @Zy8712Posted 11 months ago

  Your site looks pretty good. I feel ike another way you could've done the spacing in the annual plan box is by using display: flex and then justify-content: space-between. This would require you to modify your html a bit as well. So that the spacing is between two items, your change text and the stuff on the left hand side fo the box. So changing your html, it could look something like:

  <div class="order__summary-plan">
     <div>
       <img src="images/icon-music.svg" alt="icon-music" id="music-logo"/>
       <div class="order__summary-plan-info">
         <h2>Annual Plan</h2>
         <p>$59.99/year</p>
       </div>
     </div>
     <a href="" class="order__summary-plan-change">Change</a>
  </div>
  

  Hope this somewhat helps 👍

  Marked as helpful

  1