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

Responsive advice generator. Made with pure JS/CSS

#accessibility#sass/scss
Esteban 150

@ehmenzala

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

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

Posted

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

@ehmenzala

Posted

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