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

Product cart

@MichalSujkowski

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I need help centering the crossed out price against the promotional price

Community feedback

@Roneeey

Posted

@MichalSujkowski, @half-cto has provided the exact solution I would of suggested. But being advised what you should do doesn't necessarily translate into you understanding the solution and being able to apply it under different circumstances.

Check out this video about flexboxes. It really helped me grasp flexbox. Traversy Media (the guy who made the video) also has one on grids. I highly recommend learning that as well for layout and alignment.

https://www.youtube.com/watch?v=3YW65K6LcIA&ab_channel=TraversyMedia

1
J Z 290

@half-cto

Posted

Hi @MichalSujkowski.

I solved this by putting both prices in one <div>

<div class="price">
          <h2>$149.99</h2>
          <h4>$169.99</h4>
</div>

and adding following css properties to .price <div>

.price {
    display: flex;
    align-items: center;
}

with both price display: inline-block;

I hope this helps!

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