Skip to content
Submitted about 2 years ago

Product Preview Card Component

Tony•50
@Snorri967
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I found it difficult to align the current price and old price design until I found out that it would be easy by putting the elements in a table data cell and adding display : table-cell; to the stylesheet.

Community feedback

  • Vlad Solomon•270
    @vlad-solomonPosted about 2 years ago

    That's what display flex is for!

    Marked as helpful
    1
  • Carmen Delber•80
    @CarmendelberPosted about 2 years ago

    Hey! You can use flexbox to align both prices too:

    <div class="card__prices">
        <p class="price-main">$149.99</p>
        <p class="price-deleted">$169.99</p>
</div>

    You need to add display:flex; and align-items:center; to the parent card__prices

    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