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

Mobile first site using basic JS and media queries

@hidayahmsabah

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


  1. I couldn't figure out how to change the svg bg in mobile vs desktop, so resorted to using CSS transform of the mobile background to better fit the desktop version.

  2. I tested the page on mobile, while trying to close the accordion for a question, the question's text changes color to pseudo-element hover which is not what I wanted. When used on desktop it works completely fine.

If anyone can assist me with these or other issues that I might have missed, feel free to point them out. Thanks a bunch!

Community feedback

@mdajmalshadab

Posted

I loved the responsive transition of your page (the moment one switches to mobile screen). Although just use the overflow: hidden in the main card class of the image so that it won't exceed the card boundary.

Marked as helpful

0

@hidayahmsabah

Posted

@mdajmalshadab Thank you for your kind words and that's really good advice!

0

@Shreyansh-07

Posted

Nice work👍. Almost there, you just need some box-shadow and margin alignments for desktop.

Marked as helpful

0

@hidayahmsabah

Posted

@Shreyansh-07 Thanks for the help! Will definitely tweak them.

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