Skip to content
Submitted almost 4 years ago

faq-accordion with css flexbox and grid

Nsikak•35
@Nsikak1
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

my second design ... there was some problem i encountered on the way.

  1. i designed with a mobile ("based") first approach rather than just designing the common element first, I ran into problems when i needed to design for desktop as i ended up overriding a lot of things but i managed to restructure the project.
  2. was background image for desktop, I cant think of a way to "bind" both images together so if you resize the pages it doesn't look nice again... but all in all i would like your view on how I the design the site

Community feedback

  • Grace•31,230
    @grace-snowPosted almost 4 years ago

    Hi Christopher,

    This line is breaking the mobile solution: height: 70vh

    It doesn't let the card grow as you expand the questions because you've used a fixed height there.

    Accessibility looks fine at first glance ☺

    1
    Nsikak•35
    @Nsikak1Posted almost 4 years ago

    @grace-snow thank you, i have fixed it didnt really test it with diferent mobile thats why..thanks

    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