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

Responsive faq accordion using vite, react and vitest

#react#vite#vitest
Raistmere• 120

@raistmere

Desktop design screenshot for the FAQ accordion coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

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!

Community feedback

Med Tosby• 90

@nabinkatwal7

Posted

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 */
}
0

Raistmere• 120

@raistmere

Posted

@nabinkatwal7

Thank you for your feedback. I wasn't sure where I should put them but your template you provided will help me for future challenges.

I appreciate it

0
Raza Abbas• 790

@RazaAbbas62

Posted

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

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