Design comparison
Solution retrospective
This challenge was a bit more difficult compared to the earlier challenges. I had trouble figuring out how to implement the desktop images with the bg-pattern and did not realize I could do this with the help of background-image, background-position etc. (seems like I'm not thinking about the css background property and defaulting to using img element). In addition, I had an issue dealing with the parent height jumping as the child element (accordion) expands and collapses. For now, I used a fixed height on the parent but am curious how this issue can be achieved or fixed.
Tried to make sure the accordion complies with ADA Web Accessibility and is toggleable with a keyboard etc.
Any thoughts or opinions regarding the height issue and 1st try on ADA Web Accessibility is highly appreciated!
Thank you!
#HappyCoding
Community feedback
- @JulienLEUILLIERPosted about 3 years ago
Hi Jesse ! I did this challenge a few days ago, nice work on this one. I'm not an expert by any means but I've got some feedback on this one :
- You should make it so the arrow is a background to the button, thus making it clickable to expand the question.
- For the expanding animations, I used this approach. But I like your use of
height: autowithvisibility. - I don't think a fixed height is really an issue, I used a dynamic height but it's really preference I guess ? With animations on the expansion the height changes are more smooth.
Great job !
Marked as helpful1
Please log in to post a comment
Log in with GitHub
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