Skip to content
Submitted almost 3 years ago

Single price component using CSS Grid

Naveen Ongole•80
@Naveen39O
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

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,640
    @adram3l3chPosted almost 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
    1
  • argel omnes•1,800
    @argelomnesPosted almost 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
    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