Skip to content
Submitted about 3 years ago

Mobile first site using basic JS and media queries

hidayahmsabah•160
@hidayahmsabah
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion card
  • HTML
  • CSS
  • JS
1newbie

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

  • Md Ajmal Shadab•410
    @mdajmalshadabPosted about 3 years ago

    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•160
    @hidayahmsabahPosted about 3 years ago

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

    0
  • Shreyansh shah•45
    @Shreyansh-07Posted about 3 years ago

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

    Marked as helpful
    0
    hidayahmsabah•160
    @hidayahmsabahPosted about 3 years ago

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

    0

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