@visualdenniss
Posted
Hello Anna,
your code is neatly organised and the result looks great!
However the animation seems to cause little issue at the beginning. On the initial load, because of how framer-motion works, it simply pushes all other elements of spending_infoWrapper__twylt to shifts down, which i don't think is the intended behaviour. Adding a min-height to the chart_wrapper__uoUU4 should fix it. I noticed the same problem when i was doing this challenge, so this has worked for me.
-
Speaking of heights, you should try to avoid giving fixed heights or max-height to any text containing elements such as spending_wrapper__bt0no . The height should be determined by the content of containers. Also usually max-width instead of fixed width is better.
-
Relatedly i'd suggest you to avoid using px, better option would be to use the responsive em/rem. Here is a great resource on YT for clarifying all the differences between rem/em and explain why to use them: https://www.youtube.com/watch?v=dHbYcAncAgQ
Hope you find this feedback helpful!
Marked as helpful
@annaprusakova
Posted
@visualdenniss thanks a lot