Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Using relatives units and media queries

Val Ery 40

@Valeryio

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


That's the first proposition. What do you think about it ?

Community feedback

Reuben👾 560

@Rubylenshy

Posted

Hi @Valeryio 👋. You've done quite well on this one, good job. Maybe this few suggestions might be of help:

  • With responsiveness in view, that .card won't survive much with the kinda width property applied to it, you should check out how to make use of these max-width and min-width from this resource https://www.freecodecamp.org/news/css-properties-examples/
  • You should try to use a display: flex; property, it saves you some more lines of code and excess margins
.plan{
   display: flex;
   justify-content: space-between;
   align-items: center;
}

While you make the html markup work like this:

<div class="plan">
       <img src="" alt="">
    <div>
        <h2>Annual Plan</h2>
        <span class="price">$59.99/year</span>
   </div>
       <span class="change" >Change</span>
</div>

Check out this resource for more on flex display. https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

Hope this helps

Keep Coding @Valeryio

0

Val Ery 40

@Valeryio

Posted

@Rubylenshy Thanks a lot guy. This comment was very useful, and I learnt the using of min, and max properties. Thanks too much one again !

See you !

1
Reuben👾 560

@Rubylenshy

Posted

@Valeryio Happy to help man 🤗

0
Val Ery 40

@Valeryio

Posted

@Rubylenshy 🤝🤝🤝

0

Please log in to post a comment

Log in with GitHub
Discord logo

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