Skip to content
Submitted about 2 years ago

Product-Preview-Card second attempt

laze•220
@laze03
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

I learned sass ( still got a lot to learn about it ) and tried not to rely on bootstrap, so I created my own layout as everybody here does, and apparently, it looks good. I'm open to any suggestions/advice.

Community feedback

  • Harsh Kumar•1,390
    @thisisharsh7Posted about 2 years ago

    Hey Laze, Good Job ! your solution looks great but there are some improvement which could be made

    1. For aligning the content at the center avoid giving manual margin like here you did .product-section{ margin: auto; margin-top: 13rem; } this can be removed by body{min-height: 100vh; display: flex; align-items: center; justify-content: center;} in your CSS code.

    2. Avoid giving every item width and height and if you really want, use percentage width or max, min-width and height property like here .row .col-1-of-2{height: 45rem;} can be removed.

    Hope this helps....

    Marked as helpful
    0
    laze•220
    @laze03Posted about 2 years ago

    @thisisharsh7 Thank you so much for your feedback, I haven't learned flexbox yet so I had no clue about the first point, for the second one, how can I replace that line of code that gives the column a 45rem width?

    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