CODEWITHSUNDEEP
htmlcssfont-size
Anonymous
Anonymous

Reputation: 61

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>

Upvotes: 0

Views: 1164

Answers (2)

Johannes
Johannes

Reputation: 67738

This is a bit too much for a comment, so i write it as an answer: Reasons could be CSS rules containing a different font size with

  • a combined selector .card-hidden .card-text (only affecting the second .card-text)

  • a combined selector .card > .card-text (only affecting the first .card-text)

  • a selector card-text:nth-child(2); (only affecting the first .card-text) or card-text:first-child; (only affecting the second .card-text)

and probably also some more, but not knowing the whole code it can't be said which.

All these would override the regular .card-text rule due to their specifity.

Last but not least it can also be overridden by a regular CSS rule for .card-text which follows after all the other rules (also after media queries), thereby overwriting them.

Upvotes: 1

Cayman Roe
Cayman Roe

Reputation: 125

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

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

Upvotes: 3

Related Questions