@media queries not working

BigSqueeze · September 27, 2017

Hello! I am new to html and css, and am having an issue with media queries! I am just trying to get my site to be responsive for these three different px sizes and cant get it to action. I reverted from the second css media query shown below because it was not working at all, not even showing any attempt to change when inspected in the browser. Am I missing something? Thanks!

My @media is as shown:

@media screen and (max-width: 980px) {
}

@media screen and (max-width: 768px) {
}

@media screen and (max-width: 640px) {

}

I had but reverted to the above when nothing was taking effect..

@media screen @media screen (max-width: 640px) {
   #cwm {
       width: 550px;
       margin: 10px;
   }

}

My html :

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" type="text/css" href="../Basic-Portfolio/assets/css/style.css">
   
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>The Nerdadian</title>

</head>
<body>
   <header>
   <div class="navBar">
       <nav>
           <ul class="header">
               <li><a class="home" href="default.asp"><h2>Tanner Martin</h2></a></li>
               <li><a class="nav" href="../Basic-Portfolio/index.html">About</a></li>
               <li><a class="nav" href="../Basic-Portfolio/portfolio.html">Portfolio</a></li>
                <li><a class="nav" href="../Basic-Portfolio/contact.html">Contact</a></li>
           </ul>
       </nav>
   </div>
   </header>
   <br>
   <br>
   <br>
<div class="standard">
   <div class="block">

   </div>
   <br>
   <div id="aboutme" class="standard">
   <h1 id="H2">About Me</h1>
       <br>
       <img id="img1" src="../Basic-Portfolio/assets/images/ME!.jpg">
       <br>
       <p id="P1">
           Hello! My name is Tanner Martin. I was born in Texas, but lived in Canada for my Junior High and High School life, so I consider my self Canadian :). None of you know this, but I have an amazing little girl named Olivia!She will turn one on October 5th. I am going to teach her to be a gamer, programmer, and just generally awesome, though she already has the awesome part covered.</p>

       <p id="P2">
           I am a nerd of sorts, I collect video game memorabilia, figures of various genres, i computer game, and build my own PCs. My most played game at the moment would either be Diablo 3, or PuBG (Player Unknown Battlegrounds). I just started playing a new game called Depth, if I were to describe it, you would probably think it is lame; So i suggest you try it out for yourself. Recently I have had to startselling my figures, so my collection isn't what it used to be, but here is an old picutre for reference.. (Still not complete collection)
           <br>
           <img src="">
           <br>
       </p>
       <div class="slideshow-container">
           <div class="Slideshow1">
               <div class="numbertext">1 / 3</div>
               <img src="../Basic-Portfolio/assets/images/domo-will-eat-you.jpg" style="width: 100%">
               <div id="text1">Domo Will Eat You!</div>
           </div>

           <div class="Slideshow1">
               <div class="numbertext">2 / 3</div>
               <img src="../Basic-Portfolio/assets/images/dunnykings-orders.jpg" style="width: 100%">
               <div id="text2">Dunny King's Orders..</div>
           </div>

           <div class="Slideshow1">
               <div class="numbertext"> 3 / 3</div>
               <img src="../Basic-Portfolio/assets/images/old-collection.jpg" style="width: 100%">
               <div id="text3">Old Collection</div>
           </div>

       <div>
           <span class="dot" onclick="currentSlide(1)"></span>
           <span class="dot" onclick="currentSlide(2)"></span>
           <span class="dot" onclick="currentSlide(3)"></span>
       </div>
       <script>
           var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

<footer>

</footer>

</body>
</html>

Ingolme · September 28, 2017

The syntax is wrong in your second media query code. The @media keyword should appear only once at the beginning.

@media screen and (max-width: 640px) {

Sign In

@media queries not working

Recommended Posts

BigSqueeze

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity