Yinon Hever• 835
@yinonhever
Posted
Nice solution. I love how you dynamically adjusted the max-height animation
0
Michelle• 415
@michelleracho
Posted
@yinonhever thank you, I appreciate it!
0
Design comparison
Solution retrospective
Any feedback is always appreciated 😀
Community feedback
P
ApplePieGiraffe• 30,565
@ApplePieGiraffe
Posted
Hey, michelle! 👋
Nice to see you complete another challenge! You've done a nice job on this one! 👍
Your solution looks good, is responsive, and the accordion card works well! 👏
I only suggest,
- Using absolute positioning to position the floating cube relative to the entire accordion card itself (in the desktop layout) so that the cube doesn't move around too much when the page is resized.
Keep coding (and happy coding, too)! 😁
0
Michelle• 415
@michelleracho
Posted
@ApplePieGiraffe thank you for the feedback!
I tried to do that but since I set the container to overflow: hidden the cube wouldnt overflow beyond the container.
I also tried to omit the overflow: hidden from the container and add clip-paths to the illustration but then that didnt work well - I didnt like how the illustration doesnt cover the entire height when the accordion expands.
I couldnt figure out a better solution so I had to compromise to a floating cube 😅 . Do you have any suggestion? 👉👈
0
P
ApplePieGiraffe• 30,565
@ApplePieGiraffe
Posted
@michelleracho
You can wrap the accordion and floating cube in a container that is the same size as the accordion (which shouldn't be hard, since the container will be sized according to its content), and then use absolute positioning to place the floating cube relative to that container. That way, the floating cube should always stick to the left side of the accordion and it won't be cut off when you set overflow: hidden on the accordion itself. 😉
0
Michelle• 415
@michelleracho
Posted
@ApplePieGiraffe that worked!! thank you 🙏 you're awesome! no more floating box for me 😂
0
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