Skip to content
Submitted almost 2 years ago

Responsive product preview card

Danyal•50
@imRanDan
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

  • 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,650
    @HassiaiPosted almost 2 years ago

    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
    @imRanDanPosted almost 2 years ago

    @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

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