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

Used Sass and flexbox to make responsive

@Kpersaud-Dev

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Is there a way to change the image based on the device used? I saw that there is are separate images stored in the images folder for mobile and desktop. Thanks!

Community feedback

Galdino 215

@GaldinoMat

Posted

Hey Kevin. You did a nice job, but try to use media queries to change the image depending on the resolution, i think this will help you a lot in the future.

1

@Kpersaud-Dev

Posted

@GaldinoMat

Thank you for pointing that out! I added media queries for desktop and mobile but missed it for tablet and laptops. I'll be sure to add that going forward. Thanks again!

0

@samuelpalaciosdev

Posted

Hello Kevin, hope you're good!👋

Yes, there's a way, with the srcset and sizes attribute for <img> and the <picture> element. I suggest you to read this article: https://css-tricks.com/responsive-images-css/.

1

@Kpersaud-Dev

Posted

@samuelpalaciosdev

Hi Samuel, hope you're well too!

That's exactly what I was looking for. Thank you so much!

0

@samuelpalaciosdev

Posted

@Kpersaud-Dev I'm glad I helped you, if you could upvote my reply would helped me. Thank u, have a nice day!

0

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