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

Product Card Review

@MatheusChrispim

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


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

@BernardusPH

Posted

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
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