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

FAQ accordion card with Stylus & without JS

@macpoz

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


Hi

This is my 5th challenge here. Feel free to give feedback

Community feedback

Account Deleted

Hey there, how do you make your code line up in the design comparison? How are you estimating the sizes of the boxes in your solutions? This is nice btw!

0
Mark Mitchell 1,820

@markup-mitchell

Posted

I don't mean the breakpoints, I mean the width of the card when detail is opened.

If you look at viewport width 550px with all the FAQs closed, then open one the whole card expands horizontally.

Anyway, good luck.

0
Mark Mitchell 1,820

@markup-mitchell

Posted

This looks great - transitioning the height property makes the accordian open so smoothly!

I notice that below the desktop breakpoint the width of the card increases with a jump when you open the accordian, which is a shame when you've gone to so much trouble with the height.

0

@macpoz

Posted

@markup-mitchell Thanks for your feedback. I use Chrome DevTools and during development I switched between 375px and 1440px and I didn't seen this jump. Now I added bit of a transition and it may not be perfect, but changing breakpoints is not that sudden.

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