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..
</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>
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>
@media queries not working
in CSS
Posted
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>