Anonymous Anonymous - 2 months ago 8
CSS Question

CSS Not using correct font-size

When I open the webpage in Chrome the first card-text div uses the font-size of 22px but the second card-text div indicates a font-size of 22px but uses a font-size of 13.75px. Both divs indicate that the same class is being used: @media screen and (min-width: 350px) and (orientation: portrait).

I´m unable to find any solution to what might cause this problem. I hope someone can give me some direction to where I could look for this problem...



.card-text {
color: var(--standard-text-color);
font-family: standard-font;
}
@media screen and (min-width: 300px) and (orientation: portrait) {
.card-text {
font-size: 21px;
padding: 10px;
margin: 0px;
}
}
@media screen and (min-width: 350px) and (orientation: portrait) {
.card-text {
font-size: 22px;
}
}

<div class="card">
<div class="card-title">Welcome</div>
<div class="card-text">This is some text</div>
<div class="card-hidden">
<div class="card-text">This is some other text</div>
</div>
</div>




Answer

This may or may not work, but try put this in your HTML head:

<meta name="viewport" content="width=device-width, initial-scale=1">
Comments