Submitted over 3 years ago

Single price component using CSS Grid

@Naveen39O

A solution to the Single price grid component challenge

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?

Code

Please log in to post a comment

Community feedback

Adarsh•1,640

@adram3l3ch

Posted over 3 years ago

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

argel omnes•1,780
@argelomnes
Posted over 3 years ago
Hey @Naveen39O,

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

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