Skip to content
Submitted over 4 years ago

ReactJS / CSS

Chris Stolba•170
@chrisstolba
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Base Apparel coming soon page
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

As the width scales down, I wish I had a better solution for the hero-desktop image. I also didn't quite know what to do with the hero-mobile image from width of 700px to 375px --- it was a bit too stretched.

Also, I don't know how to get the "error exclamation mark" icon.

Community feedback

  • Roman Filenko•3,335
    @rfilenkoPosted over 4 years ago

    Hi, on smaller width put back background-size: cover; so the image preserves correct proportions. In this case, I would rather use img tag with object-fit property. Wasn't icon included in downloaded files ? Tne name is icon-error.svg, so use img tag with position:aboslute inside form.

    Roman

    1
  • Chris Stolba•170
    @chrisstolbaPosted over 4 years ago

    Thanks for the feedback... I missed the error icon in the download package.

    I will have to do some research on the best way to reactively load different images based on screen size in React. Not sure of the most convenient way atm.

    Thanks again!

    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