CODEWITHSUNDEEP
htmlcssmedia-queries
brohxa
brohxa

Reputation: 119

Stuck in using media query

I was making a website and after completion, I was applied @media but i ran into a problem.

After using @media on my logo or anything i run it, but chrome is not detecting the @media. Then to solve this problem i made a random footer and aplied @media on it. I set the font to be smaller and it was working fine.

Why it is not working on the body or the header?

<!-- body -->
<div class="body">
<section class="body-left">
  <p class="left-text">SEE YOURSELF BY. <br> <span>VANITY FAIR</span></p>
<video autoplay loop src="img/video.mp4">
</video>
</section>
<section class="body-right">
  <p class="right-text"><span class="quote">"</span><br>I may be a beginner at some things, <br> but I've got a black belt in shopping. <br> — Phyllis Nefler </p>
<img src="img/female.jpg" alt="sdf" class="female">
</section>
</div>
<!-- end body -->
<footer>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</footer>
</body>
</html>

In this code where the body is the media is not working there. but the dummy footer which i created it is working there. Strange.

}
.quote{
  font-size: 50px;
  font-family:'Playfair Display', sans-serif;
}


/* body section right */
 p{
  width: 100%;
  height: 30vh;
  font-size: 40px;
}
@media all and (max-width:1000px) {
p{
  font-size: 20px;
}

}

In this example media on the quote(body-right) is not working

and p which is the dummy footer media is working there

There are no errors.

Upvotes: 1

Views: 77

Answers (1)

Anurag Srivastava
Anurag Srivastava

Reputation: 14413

Its because .quote is more specific. Read more here

You can use the same class in the media query:

@media all and (max-width:1000px) {
   .quote {
      font-size: 20px;
   }    
}

Upvotes: 1

Related Questions