Skip to content
Submitted over 2 years ago

Responsive advice generator. Made with pure JS/CSS

Esteban•150
@ehmenzala
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Advice generator app
  • HTML
  • CSS
  • JS
  • API
2junior

Design comparison

SolutionDesign

Solution retrospective

Do you have recomendations for the image part? I have used media queries and display: block; / display: none; stuff to hide or show the images when necessary. But I think there could be a more suitable solution for this.

Community feedback

  • Alex•330
    @CallMe-ALPosted over 2 years ago

    Looks good Esteban! You could always use the <picture> element to switch up which images your page loads more responsively. It's basically a pure html way of having your browser choose which image it should load based on display/device scenarios. Check out this Mozilla tutorial for more info: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#art_direction

    Hope this helps!

    Marked as helpful
    0
    Esteban•150
    @ehmenzalaPosted over 2 years ago

    @CallMe-AL I has no idea that this exists! Thank you so much. I will use it from now. tytytyty 😁

    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