Submitted about 3 years ago

Order summary

@deksa89

A solution to the Order summary component challenge

Solution retrospective

It's my 3th challenge and I am still a newbie. What is the best practice when dealing with multiple elements side by side (such as where Annual Plan, music icon, price and change are)??? Should we use position-relative to set them up or is there a better practice? I have feeling that I am missing something on that matter.

Any feedback is welcome.

Thank you! :D

Code

Couldn’t fetch repository

Please log in to post a comment

Community feedback

Wisdom•80

@Abasiekong

Posted about 3 years ago

First, you need to understand the visual layout of how elements are placed.

In this case, I would suggest wrapping the Annual plan text and Pricing in a parent element:

<div class="pricing-plan">
     <p class="pricing-plan--heading">Annual Plan</p>
     <p class="pricing-plan--sub-heading">$59.99/year</p>
</div>

When you're done you then wrap the the Music Icon, Pricing Plan & Change button, make them share the same parent element, like this:

<div class="summary-order-pricing">
          <img src="images/icon-music.svg" alt="Music Icon">

          <div class="pricing-plan">
               <p class="pricing-plan--heading">Annual Plan</p>
               <p class="pricing-plan--sub-heading">$59.99/year</p>
          </div> 

          <a href="#" class="btn-change">Change</a>
</div>

From this point, you could set the display property of the summary-order-pricing block to display as a flex container:

.summary-order-pricing {
    display: flex;
}

and you're all set!

Marked as helpful

Dean Hudek•290
@deksa89
Posted about 3 years ago
Awesome @Abasiekong thank you! I appreciate it! :D

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord