I have built and rebuilt this project from scratch a couple times over and I cannot get rid of this.
What I Got
I have three Lottie animations on this page with only two being served to the user at a time.
- The first is the hero logo at the top
- has our branding’s minimum white space baked in
- height and width are preset in file
- appears on everything
- The second is a “Tetris” wall of text towards the bottom
- has no space baked in
- appears on everything except mobile portrait
- Beginning of animation is colored text on transparent background
- Animation wipes a Red background in towards the end
- 7 seconds long
- The final one is the Tetris wall but portrait
- hidden on everything but mobile portrait
- Otherwise same rules apply as landscape version
- All lotties originally created in Bodymovin for v1 of the page, current ones are LottieFiles plugin
Ideal world
The hero logo is set to auto for width and height. This leaves room on the sides until you get to mobile landscape at which point it becomes full width.
The tetris walls are set to auto for width and height. This has them appearing as full width in their containers. The parent container has two corners rounded and is set to overflow: hidden so the walls looks like they have those corners rounded too. The walls are also sitting perfectly on the bottom of the parent container.
No no no. Not in my house.
Real world
The tetris wall (landscape) has roughly 34 pixels of space pushing it off the bottom of the parent container. So I overrode it with negative margin. Well, unless you use a Full HD monitor where that space changes to ~45 pixels. Probably worse on 4k but I’m not that fancy yet.
It’s also got a bit of space on the right side. I centered and made it 101% and said to hell with it.
The tetris wall (portrait) and hero logo in mobile sizes add in random gigantic spacing on the sides for some reason.
Steps to Replicate
- Open in desktop browser for first two lotties
- allow Tetris wall animation to complete
- Observe issue for Tetris wall Landscape
- Resize to Mobile Portrait (either Webflow preview or Chrome DevTools w/refresh after)
- Open in mobile browser (note: Mobile issue does not replicate in Webflow preview nor in Chrome Dev Tools, only in browser on cell phone. Ya know, the way clients will actually see it.)
- Allow Hero Logo animation to complete on both devices
- Compare sizes noting that the larger logo on the computer is correct
- Allow Tetris wall animation to complete
- Observe issue for Tetris wall Portrait
- Compare with computer preview
Troubleshooting
On top of the negative margin and resizing the width - which are currently implemented - I have tried setting the lottie to full width as a flex child, setting the parent container to flex with children at full width. Setting the portrait wall to 100vh.
I’ve checked each lottie and every parent up the food chain. There’s no padding, margin, or positioning settings anywhere.
I built a new home page from scratch, exported the lotties using lottiefiles plugin instead of bodymovin, and used entirely new classes for every element on the page.
I just removed the negative margin and implemented the fix found here
Also tried the custom attribute to a value of none suggested here
Still screwed up. I don’t have a clue.
Help me Obi-Wan Kenobi(s). You’re my only hope.
deadhand.webflow.io (staged site)
Read Only Link (current page)
AEP File (cause maybe I f’d up there?)
