Skip to content
Submitted about 1 year ago

Product preview solution using Flexbox and CSS custom properties

Kothe•90
@Kothe-1
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

Did i overdid in my CSS code? I would like to know if there was any possible way to compact my CSS and if i repeated any elements or properties unnecessarily. Since i really knew to HTML and CSS i'm afraid i must be over complicating things.

Community feedback

  • Matias Ludueña•1,990
    @matiasluduena23Posted about 1 year ago

    Hi KOTHE’S. Nice work! Just two recommendation.

    • You can use a picture html element to switch between your images depending on the size of viewpor of the device.
    • To center horizontally 2 element you can use in it's parent display: flex; align-items: center; you can center you button content if you add this to you button, but you must wrap your text ("Add to Cart") inside a <span>Add to Cart</span> tag.

    Hope this help you!

    Good code!

    Matias

    Marked as helpful
    1

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