Skip to content
Submitted over 1 year ago

Responsive faq accordion using vite, react and vitest

react, vite, vitest
Raistmere•120
@raistmere
A solution to the FAQ accordion challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Question: I was having trouble figuring out the best approach to responsive design and would appreciate any feedback. The challenge has 2 designs: one for mobile (375px), and another for desktop (1440px). Do you create multiple media queries between these resolutions? If so, can you breakdown your thought process on making sure the responsive design flows well?

I greatly appreciate any feedback.

Thank you!

Code

Please log in to post a comment

Log in

Community feedback

  • Med Tosby•90
    @nabinkatwal7

    You can implement mobile design by simply adding breakpoints at require width or heights. Here is an example:

    /* Mobile devices */
@media only screen and (max-width: 767px) {
  /* Styles for mobile devices */
}

/* Tablets and small laptops */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  /* Styles for tablets and small laptops */
}

/* Laptops and desktops */
@media only screen and (min-width: 1024px) {
  /* Styles for laptops and desktops */
}
  • Raza Abbas•770
    @RazaAbbas62

    Implementing distinct media queries for mobile (375px) and desktop (1440px) is essential to ensure a seamless responsive design that prioritizes content hierarchy and functionality adjustments. Thanks

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