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

Jethier 390

@jCasia

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


The challenge I had in coding this project was probably trying to make it responsive due to the background and the images being in peculiar places for both the desktop and mobile. I used a few resources to get the JavaScript to work and try to fully understand the logic in making the accordion, which made me more confident in using DOM. Overall, it took a while but it was a very enjoyable project to code!

Community feedback

@kowsirahmed

Posted

@jCasia Very good job. Absolutely responsive. Love It.

One thing I noticed is that, the box gets very big at 800px.

  • width property should be in % or vw unit which makes the element change its size with the container or viewport. width: 80%
  • max-width should be set in px or rem or em units which makes the element maxed at a certain limit. max-width: 600px
  • The above 2 can be combined in one line: width: min(80%, 600px).

Marked as helpful

0

Jethier 390

@jCasia

Posted

@kowsirahmed Thank you for the tips!😊 the images were a real problem for me!

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