Skip to content
Submitted almost 3 years ago

Responsive website using Flexbox

Hala•200
@halamh
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

How can I make the text "Annual Plan" and the price below it closer to the music icon instead of being in the middle?

Community feedback

  • Robert K•80
    @RobertK0Posted almost 3 years ago

    Personally, I've used grid and some padding around for that. But since you used flex box/row/space-between, you can just add margin-right:auto to your plan-text div and it should work, then add some padding so it's not too close to the icon.

    Playing around with attributes in chrome dev tools helps a bunch with this, just try different things, add some padding, remove it, add an auto margin, a flat value margin, a % margin, inherited margin etc. etc. and just see what it does. Best way to learn first hand.

    Marked as helpful
    1
  • Hala•200
    @halamhPosted almost 3 years ago

    I'll try this, thanks! Update: It worked!

    1

Please log in to post a comment

Log in with GitHub

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