Can anyone help with a line spacing issue

HTML-CSS
1

I wonder if anyone can help… I don’t seem to be able to figure out why when I shrink my website down so that a certain piece of text is on 2 lines why I can’t affect the line height with my CSS…?

The website I am working on is this one: http://www.mutantalien.com/survey_form/

When I shrink the screen down to say 320px width (say Iphone 5 size) then the text ‘What would you like to see improved about the Tangent-Labs experience?’ doesn’t line space properly even though I have the code:

.sub-label {
margin-top: 5px;
margin-bottom: 5px;
line-height: 14px;
}

But if I add say:


background-color: #fff200;

Then it does change the background so it is picking up the CSS for that section - also the other parts of the text that come under .sub-label or line-space format OK?

What is going on??

2

After looking at what was different about the other two labels, it looks like adding the following:

    display: flex;
    flex-direction: column;

to the .checkbox-div class fixes the line-height. You have these two properties on the containers of the other two labels as well. (form-group and comments-div)

1 Like
3

As per MDN:

On block-level elements, it specifies the minimum height of line boxes within the element. On inline elements, it specifies the height that is used to calculate line box height.

So as your inline label wraps to two lines, line-height is currently applying to both lines individually rather than the gap between the two.

try adding:

display: block

to your sub-label class.

1 Like
4

Thanks, that’s awesome!

5

Thanks that’s awesome!

6

That fixed it… thanks for your help! :+1:

1 Like