Skip to content
Submitted over 1 year ago

React and Tailwind CSS

Jose Nectali•180
@Necta-glitch
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

For me, the part that took me time to figure out how to do was the change in the images because there are two the mobile image and the desktop image and I had to create a function that when the width of the screen when greater, change the value of a variable with use state that contains the URL of the mobile image, to the image for desktop

Community feedback

  • hitmorecode•6,680
    @hitmorecodePosted over 1 year ago

    You could have done this with the picture element

    <picture>
    <source media="(min-width: 900px)" srcset="desktop image">
    <source media="(min-width: 500px)" srcset="mobile image">
    <img src="desktop image">
</picture>

    With this you can change images without media queries

    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