Skip to content
Submitted almost 5 years ago

Created with CSS Grid - Mobile-first Design

dotrider•70
@dotrider
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

Hello all, I feel like my CSS is too long for this project, any advice I can clean it up more? Also, how can I center "per month" next to the price? I will appreciate any feedback.

Community feedback

  • argel omnes•1,800
    @argelomnesPosted almost 5 years ago

    Hi Pablo,

    Good job! You can set "per month"'s parent container to display: flex to center it. For your button, you can remove display: inline-block, text-align: center, and text-decoration: none. These are the defaults for buttons.

    1
    dotrider•70
    @dotriderPosted almost 5 years ago

    Hello Argel, I removed the defaults for my button and my CSS looks shorter and cleaner. Thanks!

    0
  • Matěj Kubíček•130
    @matejkubicekPosted almost 5 years ago

    Hi, nice work, your css is not too long. For vertical align "per month" try vertical-align: middle, in your case apply on both spans.

    1
    dotrider•70
    @dotriderPosted almost 5 years ago

    Thank you! you feedback was really helpful!

    0

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