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

Single price component using CSS Grid

@Naveen39O

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi, I have completed the challenge and made the solution as close as possible to the design. But, I am not able to find an easy way to align the text "per month" vertically center w.r.t to 29 dollars. Any suggestions?

Community feedback

Adarsh 1,560

@adram3l3ch

Posted

You can align the span cost-month by wrapping the cost and cost-month in a div apply a display of flex on it.

<div class="price-flexbox">
   <span class="cost">$29</span>
   <span class="cost-month">per month</span>
</div>

.price-flexbox{
   display:flex;
   align-items:center;
   gap:1rem;
}

Marked as helpful

1
argel omnes 1,800

@argelomnes

Posted

Hey @Naveen39O,

You missed the mobile design. You can contain both in an element and play with flex property.

Marked as helpful

1

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