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

Responsive product preview card

Danyal 50

@imRanDan

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


  • The only thing I found to be difficult was figuring out / trying to remember how media queries work. I feel that I now understand mobile-first development, as you start small and then build the bigger views outwards.

  • I am unsure of whether or not I did my media queries correctly.

  • What can I do to improve upon my codebase/project?

Community feedback

Hassia Issah 50,670

@Hassiai

Posted

To center a content on a page, add min-height:100vh; display:flex; align-items-center: justify-content: center; to the body. There is no need to give .container positon: absolute and its properties, and a height value for the desktop and mobile design. Give the .container a width value and a border-radius value. Add backgroundcolor: hsl(white); a padding top and bottom value to the .right-side. since you declare display:flex in the body there is no need to give the flex-items .right-side and .left-side a float value instead of .right-side .sale-price use .sale-price, this will style the same text. Since you have already specify display: flex; in .price, there is no need repeat it in .og-price. use display: inline-block instead of display: flex and its properties in the styling of button Use rem or em as unit for the padding , margin and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To Hope am helpful HAPPY CODING

Marked as helpful

1

Danyal 50

@imRanDan

Posted

@Hassiai Thank you for taking the time to review my project and for the constructive feedback! I went into my code and implemented all the things you mentioned. It is all looking so much better (in the codebase especially). I greatly appreciate that Kevin Powell video too. I can put something together, but at times it can get messy.

This advice was incredibly helpful! Thanks again! :D

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