Streaming live at 10am (PST)

Padding as percentage to maintain responsive aspect ratio - Unsolved


#1

I read here: https://css-tricks.com/aspect-ratio-boxes/ 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: https://preview.webflow.com/preview/finns-portfolio?preview=0970f7d5711c39d74ffe55e6aa0dd202


#2

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

<style>
.selector{
     padding-top: 591.44px / 1127.34px * 100%;
    more code...
}
</style>

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


#3

Hey,
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.