Skip to content
Submitted about 2 years ago

Product Preview Card Challenge using html and css with flexbox

baxtro•20
@baxtro
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 tried flexbox with this one. I'm not sure if I implemented it correctly but I gave it a whirl. I did most of this in the Atom code editor, and the hover state did not alter how it looked in the browser, but now that it's live and uploaded to the web, the button hover state changes the appearance of the content a bit. I'm not sure why. I used a CSS button generator, so I'm not sure if it's the code in there. Thanks for any feedback.

Community feedback

  • Omer7_7•100
    @omerkhan7210Posted about 2 years ago

    I think the button should have a cursor:pointer on it so that it would look interactive, secondly if you have used display:flex on your bigcontainer then you should use flex-basis:50%; on both of the child elements of the container and also on the text column as well where you have used width.You used flex-direction so you can also use gap property to give space between your text elements. Hope you will find this helpful! :)

    Marked as helpful
    0
    baxtro•20
    @baxtroPosted about 2 years ago

    @omerkhan7210 Thanks for the feedback!

    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