Jump to content
BigSqueeze

@media queries not working

Recommended Posts

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">
    <!--script type="text/javascript" src="../Basic-Portfolio/assets/Java/slideshow1.js"></script-->
    <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>

            <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="next" onclick="plusSlides(1)">&#10095;</a>
        </div>
        <br>

        <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);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("Slideshow1");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1} 
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides.style.display = "none"; 
  }
  for (i = 0; i < dots.length; i++) {
      dots.className = dots.className.replace(" active", "");
  }
  slides[slideIndex-1].style.display="block"; 
  dots[slideIndex-1].className+="active";
}
        </script>
        <p id="P3">
            I love to travel! My goal is to live on every continent for at least 2 years by the time I pass away. I lived in Greece for three months, so Europe has been partailly completed! Even though I was born in the US, I lived in Canada for my JuniorHigh and High School careers. If you would like to contact me, drop me a message <a href="contact.html">Here!</a>
        </p>
    </div>
    <div id="cwm">
        <h3>Connect With Me</h3>
        <a href="https://github.com/Twmartin1147"><img class="img2" src="../Basic-Portfolio/assets/images/github-sq-bl.png"></a>
        <a href="https://www.linkedin.com/in/tanner-martin-1147/"><img class="img2" src="../Basic-Portfolio/assets/images/linkedin-sq-blu.png"></a>
        <a href="https://stackoverflow.com/users/8673657/tanner-martin"><img class="img2" src="../Basic-Portfolio/assets/images/stackoverflow-sq-yel.png"></a>
        <br>
    </div>
</div>
    

<footer>
    
</footer>

</body>
</html>

 

Share this post


Link to post
Share on other sites

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) {

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...