Skip to content
Submitted almost 2 years ago

Responsive React Product Preview

Christina Knapp•40
@christinareanna
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

Getting the SVG icon to be perfectly aligned with the text in the button is always a challenge for me. I'm not sure if my padding is correct overall, but I think it looks okay. The paragraph font color looks a little off to me, but I used what was given in the style guide so I'm not sure. I used bootstrap for the mobile view then some flexbox styling for the desktop view. I'd like to add more media queries for landscape view on a phone, but overall, this was a very fun challenge.

Community feedback

  • Arkell Kenney•280
    @adkenneyPosted almost 2 years ago

    Hi Christina!

    applying flexbox to the button and centering the flex items with justify-content: center and align-items: center usually works for me when centering SVG icons with button text.

    Nice solution! happy coding!

    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