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

card with flex

@Hazard-58

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


I am a new at this work , help me improve my code because it is a whole mess

Community feedback

Fatlind Shehu 2,230

@fatlindshehu

Posted

Hi, Here you have some suggestions on how to improve your component:

  • body{display: flex; justify-content: center; align-items: center} Set this settings for the body to center the main content both horizontally & vertically.
  • Make sure the body has a height of 100vh;
  • Create a main component and set its border radius to 10px & overflow: hidden to make the rounded corners for the image.
  • Create two child elements (divs) one for the image & one for the heading, text & button;
  • Set display flex to the main component and change the flex-direction to *column * on smaller screens.
  • Check the details more carefully, Perfume is uppercase and the text background color is white

Try these changes and let me know how it goes... Happy coding!!!

Marked as helpful

1

@Hazard-58

Posted

@fatlindshehu thank you very much for this suggestions they helped me improving my codes in the challenges next to it thank you.

1

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