Skip to content
Submitted about 2 years ago

flex box, media queries

Mbahkingsley•20
@Mbahkingsley
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 had issues aligning the two price tags and also aligning the cart icon with text in the button. I could not figure out why the font fraunces was not working.

Community feedback

  • Felipe Chaves•240
    @loopchavesPosted about 2 years ago

    Hi, Mbahkingsley!

    You can use flexbox to do this. In the parent element's CSS put:

    display: flex;
align-itens: center;

    In your code you would put these options in the "price-container" and in the "button".

    There are many other options that can help you with alignment using flexbox. See the link below with a complete guide to flexbox:

    A Complete Guide to Flexbox

    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