When applying media queries, nothing is getting adjusted

user_16535849 0
Viewed 53

I'm extremely confused because I am pretty certain that I have it set up correctly. It doesn't set the font to 10 pixels on my phone and when I adjust the screen. Am I missing something? Here's the code:

.above-email-box {
  /* aligns text to the center with position absolute */
  text-align: center;
  position: absolute;
  margin-top: 90px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Glory', sans-serif;
  font-family: 'Klee One', cursive;
  font-size: 30px;
}
@media only screen (min-width: 768px) {
  .above-email-box {
    font-size: 10px;
  }
    }

Thanks.

media-queries css html
2 Answers

.above-email-box {
  /* aligns text to the center with position absolute */
  text-align: center;
  position: absolute;
  margin-top: 90px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Glory', sans-serif;
  font-family: 'Klee One', cursive;
  font-size: 30px;
}

@media only screen and (max-width: 768px) {
  .above-email-box {
    font-size: 10px;
  }
}
<div class="above-email-box"> Demo Text</div>

Logical operators

The logical operators not, and, and only can be used to compose a complex media query. You can also combine multiple media queries into a single rule by separating them with commas.

You have to define max-width & min-width consciously, sometime it can be confusing, min-width means when you add styles into it, it display the styles after the min-width condition is met, if you define min-width:500px your styles are applicable on screens width 500px and above not below

user_29933900

In order to run the media query for mobile device you need to change min-width to max-width like below

@media (max-width: 768px) {
  .above-email-box {
    font-size: 10px;
  }
}

When your screen width is below 768px it will change font-size to 10px

user_90095830
Related