FAQ Accordion HTML, CSS, JS

Hey, awesome work on this one, though the default layout looks like the mobile design which should not be. Did you code this on a wide screen? You must account that there are 1366x767 resolution screen for desktop.

Some suggestions would be:

• Avoid using height: 100vh on a large container, this makes the element's height limited to the remaining screen/viewport's height. Instead, use min-height: 100vh, this takes full viewport but allows the content to expand if it needs to. Also remove the width: 100% on the body tag, block element like the body tag have a default width: 100%.
• You are missing the cube image on the desktop layout, you might want to check that one out.
• It would be better if the question name can be toggled to show the answer as well. Since you are using button for the dropdown icon, you can wrap the question name inside the button so that they will activate it as well. But to be honest, I would just use details element on this one. Since using regular button needs to be manipulated in javascript to make it more accessible for users, details is already accessible which is great.

Aside from those, great work again on this one. But maybe try to lower down your breakpoint so users won't have to zoom out just to see the desktop layout.

Yea this one was tricky for me as well!

For positioning elements I would definitely try to take advantage more of flexbox so you don't have to hard code a lot of margins, especially for the faq-container, since its more grid-like and uniform unlike the image, not sure how to effectively use flexbox on the image lol.

Also try to use more percentage or relative values in margins, padding, so that items can position themselves more dynamically when the screen size changes.

Other than that keep at it!