Whenever I have multiline paragraphs or labels, the font size seems to adjust depending on the number of lines. All I want is to keep the font size consistent regardless of the lines. The labels all have the same CSS styling and inheritance.
Here is a visual representation of the issue
element.style {
}
@media (min-width: 320px)
.FAQAs {
/* width: 95%; */
padding-left: 2vw;
padding-top: 3vw;
padding-bottom: 3vw;
padding-right: 3vw;
float: left;
border-top-style: solid;
border-top-color: grey;
border-top-width: 2px;
width: -moz-available;
width: -webkit-fill-available;
width: fill-available;
}
@media (min-width: 320px)
.FAQFontSize {
/* font-size: 3.2vw; */
font-size: 31.7px;
}
* {
font-family: Verdana;
}
label[Attributes Style] {
}
user agent stylesheet
label {
cursor: default;
}
@media (min-width: 320px)
.bodyFontSize {
font-size: 100%;
}
I've experimented with different units for the font size (em/px/pt etc), tried changing the inheritance, setting parent's font size, but nothing seems to resolve it.
Visit this JSFiddle link for further details
The JSFiddle focuses on mobile devices, so adjusting settings for desktop may be necessary.