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 preview card component using HTML CSS

jiju278 50

@jiju278

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


What is the easiest method to handle the picture and the responsive please ? I would appreciate some tips

Community feedback

Eliabe 200

@eliabedasilva

Posted

hi jiju278 I recommend using figma to be able to better analyze the design. For example, using the rectangle creation tool to be able to estimate the size of certain sections of the design. So your solution will be more similar to the challenge.

Marked as helpful

1

jiju278 50

@jiju278

Posted

@eliabedasilva Hi Ellabe, thank you for your piece of advice. For now, I don't have a pro account but maybe it's worth it

0
Atif Iqbal 3,200

@atif-dev

Posted

Hi jiju278, congrats for completing the challenge. You also need to center the whole card.

For centering do as:

body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

and you can also learn centering from here.

For responsiveness read this article or learn responsiveness from this free course.

Hope you will find this Feedback Helpful.

Marked as helpful

1

jiju278 50

@jiju278

Posted

@atif-dev Thank you for all the ressources, appreciated :)

0

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