Streaming live at 10am (PST)

Padding as percentage to maintain responsive aspect ratio - Unsolved


I read here: that when top padding is set as a percentage, height is configured as a ration of a divs width. This trick can be used to maintain an images aspect ratio with responsive design.
I have tried to enter the top padding as a percentage in the designer my site, but this trick does not seem to work (the sizing is way off). Can anyone help?

My read only link is here, and I have tried to implement this on the ‘squad name generator’ page:


You should use the math like the tuturial:
padding-top: 591.44px / 1127.34px * 100%;
And change the units.

No way to do this math by webflow UI - Only by custom code (add custom CSS) to

     padding-top: 591.44px / 1127.34px * 100%;
    more code...

In my opinion, this is “too much” for grid layout (This trick useful for videos).


Math generates a percentage result, so what is the difference between doing this and just writing a percentage directly?
My question was whether webflow supports percentage top padding within the designer, and whether this percentage is calculated from the div blocks width.