Heading bounding box is not resizing like shown in Webflow University tutorial video

If you go to 1:08 of this video, he demonstrates how the bounding box will get bigger and push other things around in the section. When I try this, the heading text just gets bigger but doesn’t move anything else. I’m controlling the ‘size’ under Typography just like in the tutorial.

If I try the same with the paragraph, it works as it should pushing things around.
Please see my screencast:

https://share.getcloudapp.com/jkuYlobB

Any advice greatly appreciated. I’m stumped!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

The difference between your example and the video is that you’re using a pixel value for your font height (62px) as opposed to the unitless size they are using (1.1-).

A unitless (aka dynamic) value here tells the font height to respond directly to the font size instead of being set to a specific size. Using 1- on the font height for example would make the height equal to the font size as it’s changed.

1 Like

thanks so much for the quick reply - how do I change my px to the unitless size? I don’t see that option in the drop-down - see screenshot - I haven’t been using Webflow for long at all btw

Screen Shot 2020-12-03 at 3.46.31 PM|391x499

problem is that you have set static line height, you can you use any proportional unit. The common practice is to use “unitless” - .

CleanShot 2020-12-03 at 23.46.12

For text in paragraph it is usually between 1.2 - 1.4 but it really only up to you. For headings set it to 1 as basic value and from there is again only on your design. So when you use any proportional units your heading will work as expected.

CleanShot 2020-12-03 at 23.46.21

more about why use “unitless” is for example on CSS Tricks

2 Likes

Awesome! that worked. Thank you both.

2 Likes

hi @Trey please feel free to check @mikeyevin response as solution to be this request marked as solved

1 Like