Skip to content
Submitted over 2 years ago

Easy Peasy Lemon Squeezy

Nate Northway•190
@nnorthway
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 strict pixel sizes always get me. how did you get the image to scale?

Community feedback

  • Karol Binkowski•1,640
    @GrzywNPosted over 2 years ago

    Great job on the challenge @nnorthway!

    You can achieve responsive images by using width: 100% and max-width: 350px for example. Or just with a one line and new CSS function width: min(350px, 100%). Sometimes you can use vw units instead of percentages or with calc() to take paddings/margins into account: width: min(calc(100vw - 2rem), 350px). There is also another way with new aspect-ratio: calc(width / height) property and width: 100%; height: auto;.

    Also always make sure to wrap the main content into <main> tag to solve accessibility issues.

    Hope this helps! Have a nice day and keep coding !

    1
    Nate Northway•190
    @nnorthwayPosted over 2 years ago

    @GrzywN the main tag! Forgot that. I think aspect-ratio would have been the answer here for sure. Thanks for the suggestions!

    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