I want a lottie image to fill the div shown in the video. upon importing the lottie to the div it resizes the div itself as well as the background. The background grows to fit the vertical length of the viewport, it gets this functionality since it is a flex child. Not sure if that little tidbit of info helps but hopefully it does so we can find a resolution. Thanks in advance and have a nice day!
You wont be able to view the issue via the share link so reference these screenshots. Also this issue is not isolated to just the lottie element it seems that any element put into the div causes resizing. Even tried setting the parent to a flexbox so i could turn shrink or grow to off, that didn’t seem to help either.
Note: Just tried to resize the lottie element and it seems to have no effect on this resizing issue. it seems that putting an object of any size causes the resizing to occur.
I noticed that on the div with class “Background_IMG-Div” you’re using Flex child sizing on grow if possible, I reset that element, put width on 100% then manipulated the height on the same div from there.
Set the lottie sizes to 100% height and 100% width
it is supposed to be set to grow. That is so the background fills the vertical space. It still does not make sense why a grandchild element would affect the size of its grandparent. If anything it should only affect its direct parent if i am correct. please correct me if i am not.
That’s weird ye.
I understand that you want to use the grow to fill the full height of the page right. Maybe you could just set a height for the NAV in vh and then fill out the rest of that 100vh in height of the Hero-Sect.
It’s probably not the best solution tho.
Ill play around in your design and maybe come up with something better
If you creating a new project with the same element, than you can just duplicate the page.
Or just copy the element from the nav and paste it in the navigator of your other page, though I noticed that sometimes it doesn’t work and shows a message “empty clipboard”
OK found a new interesting anomaly. So turns out reimporting the lottie helped a little. it was perfectly placed on top of the background image(which scaled up a little bit so it didn’t completely work). Also i played with the width of the lottie image because it was less of a width than its parent div. when i set the lottie to the equal width that its parent div had the div grew vertically(It seems like webflow is trying to wrap the div block even though wrapping is only for typography)
I also tested using the grow flex child setting for the lottie image to see if increasing its width that way would work without scaling the background, sadly it didn’t it the only thing it did was create the wrapping effect again.
I think im onto something now, not quite there yet though. I noticed when playing with the lottie parent div that when setting it to grow if possible that it actually shrinks. Starting to believe this is an error with the gui.
After thinking on this the whole day lol I think its time i reverted to your idea of using viewport height to control the hero and navbar heights. Will update if it works
Turns out setting the viewport height fixed the issue. also the image was what was causing the div to resize, editing its dimensions in the settings tab and resizing the width to match those settings in the css style tab fixed the issue.
