Line Wrap Breaks Padding

Hi Folks,

I’m having issues keeping consistent padding when shorter screen widths cause text to wrap. I’m editing the site wing tsun berlin for a client. Here is the link:

https://preview.webflow.com/preview/ving-tsun-berlin?utm_medium=preview_link&utm_source=designer&utm_content=ving-tsun-berlin&preview=a102f05d4f2e54aa5462fb8663aa297b&workflow=preview

At larger widths the screen looks like this:

At smaller widths when the line of text is broken the padding relates to the first line and ignores the wrapped line:

I’d be grateful for any help you could give to resolve this!

Cheers,

Matt

On Pricing Info Div 2 Copy remove the line height style. The default is fine and your Pricing Header container DIV already has a size of 3em height.

Thanks Michael,

I’ve removed the line height style as you suggested, but on smaller devices where the text wraps that means the wrapped element of the line is compressed into the earlier unwrapped part. Any thoughts?

https://preview.webflow.com/preview/ving-tsun-berlin?utm_medium=preview_link&utm_source=designer&utm_content=ving-tsun-berlin&preview=a102f05d4f2e54aa5462fb8663aa297b&workflow=preview

Thanks Michael,

I’ve worked it out now. Your point about the line height style on both the text and the div was the key.

When I removed the line height from the text and just had it on the div, it meant that when the text wrapped the two lines were squashed together constrained by the size of the div.

When I removed the line height from the div and just had it on the text, the div responded to the text, so when the text wrapped both text and div took up more space.

The padding was always relative to the div and not the text.