BigSqueeze Posted September 27, 2017 Share Posted 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"> <!--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)">❮</a> <a class="next" onclick="plusSlides(1)">❯</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> Link to comment Share on other sites More sharing options...
Ingolme Posted September 28, 2017 Share Posted 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) { Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now