Skip to content
Submitted over 1 year ago

Product Card Review

Matheus Chrispim Pelegrin•30
@MatheusChrispim
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

What I would most like to check is if there is something simpler with just HTML and css to be able to work with different images in responsive mode, in this case I used a div and the backgroud-image property, but I didn't find any better method just with HTML and css.

Community feedback

  • Bernardus•1,095
    @BernardusPHPosted over 1 year ago

    Hello MATHEUS CHRISPIM PELEGRIN

    Well we are mostly stuck with html and css but there are frameworks/libraries to help out like tailwind and sass/scss. Is there a problem with the background image size, if so then I would recommend using clamp for resizing.

    clamp can be used when want a min-max setting but want to work in between the min and max. Sorry for the terrible explanation but here is an example: width:clamp(500px,80%,700px) Here the item will be 80% the parent's width but it cant be greater than 700px or smaller than 500px this helps when resizing the screen.

    Hope this helped. If you have more problems then don't hesitate to ask.

    Marked as helpful
    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