CODEWITHSUNDEEP
cssresponsive-design
Ciel
Ciel

Reputation: 4440

CSS, Confused about @media with classes

I am trying to take my first forray into using "responsive" css, and I am working with this new @media ....... thing... and I am having a big of trouble understanding some of it. I have read up on it on multiple websites to form my code, and it isn't doing what I expected it to do, so I am getting more frustrated.

I basically have a place in text where, under normal circumstances, I want it to be font-size: 64px;, but if the screen gets very small (480px), I want it to be downsized to like 24px;. I added some other ridiculous properties to make sure I am actually getting the different result, but I am quite confused still.

So this was my approach...

@media (min-width: 480px) {
    .name {
        color: green;
        font-family: "Comic Sans MS";
        font-size: 24px;
      }
}

.name {
   font-size: 64px;
}


<span class="name">This is a really long name</span>

So I expected that when this runs, it will have the normal .name class, and if the resolution dips to 480px or thinner, it will go to the other one. Is this completely wrong? Because this is not what is happening for me.

Upvotes: 1

Views: 42

Answers (1)

zzzzBov
zzzzBov

Reputation: 179086

The .name selector within the media query has the same specificity as the .name selector after the media query. Because of this, the later .name selector will take precedence.

Simply changing the order will fix the issue:

.name {
   font-size: 64px;
}

@media (min-width: 480px) {
    .name {
        color: green;
        font-family: "Comic Sans MS";
        font-size: 24px;
      }
}

If you'd like the styles within the media query to take effect when the screen is 480px or thinner, you should be using the max-width media query:

.name {
   font-size: 64px;
}

@media (max-width: 480px) {
    .name {
        color: green;
        font-family: "Comic Sans MS";
        font-size: 24px;
      }
}

Upvotes: 2

Related Questions