CSS Not using correct font-size

Question

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>

The problem could be a number of things. Please provide more information. — Jacob
– Jacob, Commented Oct 3, 2016 at 21:42
The 13.75px is a computed style, when I click the arrow it takes me to the class with a minimal width of 350px. — Anonymous
– Anonymous, Commented Oct 3, 2016 at 21:59
Please provide an actual example of the issue using Snippets (the <> button in the question editor), jsfiddle or similar. — Jon P
– Jon P, Commented Oct 4, 2016 at 2:26

Cayman Roe · Accepted Answer · 2016-10-03 23:17:54Z

3

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

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

answered Oct 3, 2016 at 23:17

Cayman Roe

1251 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anonymous Over a year ago

This did work out, I was planning to add a viewport after completing the stylesheets. Until yesterday the website did display correctly and I was using media queries before. Thank you for your help!

Johannes · Accepted Answer · 2016-10-04 00:35:36Z

1

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.

edited Oct 4, 2016 at 0:35

answered Oct 3, 2016 at 23:41

Johannes

67.9k22 gold badges84 silver badges139 bronze badges

Collectives™ on Stack Overflow

CSS Not using correct font-size

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related