CODEWITHSUNDEEP
cssmedia-queries
alicht
alicht

Reputation: 809

Media Query font-size being applied to ALL settings instead of just the targeted setting

I'm trying to have my title appear in-line for a widget on all mobile devices. My regular css is:

.mobile_1.vertical-strip-layout .widget-header {
  font-family: "Barlow Semi Condensed", "Khand", "Nunito", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .5px;
  text-transform: uppercase;
}

However, on an iPhone 5/SE screen the text gets smushed together. To avoid this, I used a media query to adjust the font-size accordingly:

@media only screen and (max-width: 568px) {
  .mobile_1.vertical-strip-layout .widget-header{
    font-size: 14.5px;
  }
}

This works great, however instead of this font-size: 14.5; only being applied to an iPhone 5/SE (ie a screen size with a max-width of 568px) it's being applied to all screen sizes.

How can I set this media query to take effect JUST for an iPhone 5/SE (max-width: 568px) setting?

Upvotes: 0

Views: 38

Answers (1)

tiago
tiago

Reputation: 36

I think you are missing the unit definition on the 3rd line:

Instead of: 

font-size: 18;

Use: 

font-size: 18px;

Upvotes: 1

Related Questions