Test page here: http://ee-casestudy1.webflow.io/
Halfway down the page is most obvious (looping video grid).
Videos render at height = X
The “Half-Block” Div renders at height = X+5
I can’t find any reason for this in the stylesheet.
Can anyone think of a workaround to get rid of the excess padding? Driving me nuts.
Here’s your culprit.
Unless there’s something else you’re referring to?
A screen grab or something would be helpful. You’ve got a boatload of video going on.
That padding is actually intentional - here’s a shot of what I’m talking about. The video has a height of 408, the container is 413. It’s dynamic so the measurements obviously will be different for you but it’s always +5, resulting in that black strip at the bottom of each block that shouldn’t be there.
Could you give us the read-only? I’ve got a couple suspicions but it’ll be way easier if I can dig into it.
This is a great looking page, btw.
Alright. Here’s what’s up.
You’ve got -10px margins on your “tiles” element. And the aspect ratio of your videos is being thrown off because of it.
Remove those negative margins, then set the height of your html embeds to 28.125vw. That will match the aspect ratio of your 1280x720 videos and should take care of it.
Screenshot demo of the fix working.
Ah fantastic. Those negative margins were coming from the webflow default for columns I think.
28.125 was giving me some black gutters, but playing with that number, I got it to work. Settled on 28.55.
Thanks for realizing it was an aspect ratio thing and not a padding or height setting, missed that completely.
@Cricitem I thought I had it fixed, but there’s a quirk of webflow I think I’m running up against… the -10px margins on the columns keep coming back and creating a black gutter, I think they’re hard coded into the containers that webflow uses as the column object.
Any idea how to override? I wrote in some custom CSS to the project settings to override it but wondered if there’s a more elegant way for future reference.
That is really weird, man. I wish I knew why it was doing that. It seems like such an odd choice to randomly put negative margins on both sides.
Doing some !important CSS is probably your only recourse, for now.
@waldo @PixelGeek can you provide some insight or tag somebody who can?
