Skip to content
Submitted over 2 years ago

Product preview card component

Kartik Pal•20
@kartikp962
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Please give your valuable feedbacks. I was stuck on project to make image and text part to make it in half of the screen. tell me how can i make it easily. And also the alignment is not proper so please also let me know your suggestions to correct it

Code

Please log in to post a comment

Log in

Community feedback

  • Adán Estévez•320
    @rafdidact

    Hey, Kartik!

    I got a few suggestions that would make your code even better:

    • Your layout should be responsive. This means the components of your design should be properly reorganized depending on the width of the device your viewing it from. When I switch to mobile view, your design stays the same. You can make your CSS automatically apply new styles depending on the width of the device your viewing it from with a @media rule.
    • Your button should take all the width available and change cursor to pointer when hovering. You can achieve this with a width: 100% and a cursor: pointer.

    You can check my solution for reference. Hope it helps.

  • chicaboom-73•50
    @chicaboom-73

    Hi Kartik

    There is a great video on youtube that may answer a few questions for you. It goes through the CSS and HTML for this challenge

    https://www.youtube.com/watch?v=B2WL6KkqhLQ

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