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

Desktop version FAQs FrontendMentor

EExodussโ€ข 110

@EExoduss

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


Difficulties: using properly position: relative and position: absolute

Still some problems in resizing vertically the broswer (part of the page will be not accessible anymore)

Community feedback

@MelvinAguilar

Posted

Hello there ๐Ÿ‘‹. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

  • Avoid using position: absolute to center an element as it may result in overflow on some screen sizes. Instead, utilize the flexbox or grid layout for centering. Get more insights on centering in CSS here here ๐Ÿ“˜.
  • The content should expand when clicking on the paragraph, not just the icon. Additionally, you can implement a design where the user sees a change when hovering over the paragraph. Also, consider adding hover styles for better user feedback, as shown in the "active-states.jpg" image.

I hope you find it useful! ๐Ÿ˜„ Above all, the solution you submitted is great!

Happy coding!

0

EExodussโ€ข 110

@EExoduss

Posted

@MelvinAguilar

Hi, thank you for your extremely useful feedback. It means a lot for me.

I'll try to implement your suggestions!

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