Multiline and fontsize changing depending on number of lines

For some reason when having multiline paragraphs or labels the fontsize adjusts depending on how many lines they are, all i’m after is to have the font-size consistent regardless of the lines, the labels have exactly the same css styling and have identicial inheritance;

This shows the problem

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 tried using different units for the font-size (em/px/pt etc), i’ve tried changing the inheritance, setting parents font-size, nothing seems to be working

https://jsfiddle.net/4prwzt36/

that’s the JSfiddle, it’s specific to mobile devices however so i’m not sure how to set that on jsfiddle, the desktop version is fine

Contents hide

Answers:

Method 1

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Insert this line <meta name="viewport" content="width=device-width, initial-scale=1"> in the head tag.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating