CSS Media query not responding with jquery
Question
I created a media query for when the width of the screen reaches less than 415px, the text gets smaller, and i will ad a hamburger menu as well. But i am testing it out with the "name" variable and its not responding. I was researching this for the past 2-3hours and i cannot find an answer that works. I was thinking that maybe the j query is blocking it from working because i have the "name"variable set to hidden ONLY when a nav button is clicked. Here is my code. The rest will be in the code pen https://codepen.io/anon/pen/OppaYP
HTML
<!-- Section for Jobs Popup -->
<div id="jobs-popup">
<img id="x-icon1" src="Pictures/web%20x%20icon%20white.png">
<div class="jobs-content">
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
</div>
</div>
<!--End Section for Jobs Popup -->
<!-- Section for contact popup -->
<div id="contact-popup">
<img id="x-icon2" src="Pictures/web%20x%20icon%20white.png">
<div id="contact-content">
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
</div>
</div>
<!-- End Section for Contact Popup -->
<!-- Section for Press popup -->
<div id="press-popup">
<img id="x-icon3" src="Pictures/web%20x%20icon%20white.png">
<div id="press-content">
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
</div>
</div>
<!-- End section Press -->
<!-- Section for legal popup -->
<div id="legal-popup">
<img id="x-icon4" src="Pictures/web%20x%20icon%20white.png">
<div id="legal-content">
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
</div>
</div>
<!-- End section Legal -->
<!-- Section for Support -->
<div id="support-popup">
<img id="x-icon5" src="Pictures/web%20x%20icon%20white.png">
<div id="support-content">
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
<h1 class="whip">Test</h1>
</div>
</div>
<center><div id="top-bar">
<a class="burger-nav"></a>
<div id="nav-bar">
<ul>
<a href="#" id="jobs" class="test"><li class="nav-list" id="job-under">Jobs</li></a>
<a href="#" id="contact" class="test"><li class="nav-list" id="contact-under">Contact</li></a>
<a href="#" id="press" class="test"><li class="nav-list" id="press-under">Press</li></a>
<a href="#" id="legal" class="test"><li class="nav-list" id="legal-under">Legal</li></a>
<a href="#" id="support" class="test" ><li class="nav-list" id="support-under">Support</li></a>
</ul>
</div>
</div>
<div id="container">
<ul id="menu">
</ul>
<h1 id="name">Touch</h1>
<ul class="bubbles">
<li id="firstCircle"></li>
<li id="secondCircle"></li>
<li id="thirdCircle"></li>
<li id="fourthCircle"></li>
<li id="fifthCircle"></li>
<li id="sixthCircle"></li>
</ul>
</div>
CSS
@media screen and (max-width: 1024px) {
.bubbles{
visibility: hidden;
}
}
@media screen and (max-width: 415px) {
#name{
font-size: 2em;
}
}
#top-bar{
max-width:100%;
max-height: 7% ;
margin: 0 auto;
background-color: #FFFFFF;
}
#container{
width: 100%;
height: 100%;
margin: 0 auto;
background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
position: relative;
overflow: hidden;
}
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
color:#262626;
overflow: hidden;
}
ul {
list-style: none;
top:9%;
}
.nav-list{
float: left;
font-size: 1.2em;
padding-right: 1%;
font-weight: bold;
margin: 2%;
}
/*Reg bubbles section -------------------------------------------- */
.bubbles{
position: absolute;
top:0;
left:0;
width:100%;
height: 100%;
z-index:0;
transform:translateZ(0);
}
.bubbles li{
position: absolute;
list-style: none;
display: block;
border-radius: 100%;
-ms-animation: fadeAndScale 33s ease-in infinite;
-webkit-animation: fadeAndScale 33s ease-in infinite;
-moz-animation: fadeAndScale 33s ease-in infinite;
-o-animation: fadeAndScale 33s ease-in infinite;
transition-timing-function: linear;
}
/* The first Circle animation------------------------------------------------------------------------------------------------ */
.bubbles li:nth-child(1) {
width: 9%;
height: 20%;
top:20%;
left: 20%;
background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
animation-name: firstCircle;
}
/* Mozilla First Circle Animation */
@-moz-keyframes firstCircle {
0% {
z-index: 100;
-moz-transform: scale(0);
}
100%{
z-index: 0;
-moz-transform: scale(200);
}
}
/* Webkit First Circle Animation */
@-webkit-keyframes firstCircle {
0% {
z-index: 100;
-webkit-transform: scale(0);
}
100%{
z-index: 0;
-webkit-transform: scale(200);
}
}
@-ms-keyframes firstCircle {
0% {
z-index: 100;
-ms-transform: scale(0);
}
100%{
z-index: 0;
-ms-transform: scale(200);
}
}
/* End first circle animation -------------------------------------------------------------------------------------- */
/* Begin Second Circle Animation ------------------------------------------------------------------------------------ */
.bubbles li:nth-child(2) {
width: 9%;
height: 20%;
position: absolute;
left: 40%;
top:40%;
animation-name: secondAnimation;
}
/* Webkit Second Animation */
@-webkit-keyframes secondAnimation {
0% {
z-index: 100;
-webkit-transform: scale(0);
}
100%{
z-index: 0;
-webkit-transform: scale(200);
}
}
/* Mozilla Second Animation */
@-moz-keyframes secondAnimation {
0% {
z-index: 100;
-moz-transform: scale(0);
}
100%{
z-index: 0;
-moz-transform: scale(200);
}
}
/* Ms Second Animation */
@-ms-keyframes secondAnimation {
0% {
z-index: 100;
-ms-transform: scale(0);
}
100%{
z-index: 0;
-ms-transform: scale(200);
}
}
/* End of Second Circle ------------------------------------------------------------------------------------- */
/*Begin of Third Circle ----------------------------------------------------------------------------------- */
.bubbles li:nth-child(3) {
width: 9%;
height: 20%;
position: absolute;
left: 60%;
top:10%;
animation-name: thirdAnimation;
}
/* Webkit Third Animation */
@-webkit-keyframes thirdAnimation {
0% {
z-index: 100;
-webkit-transform: scale(0);
}
100%{
z-index: 0;
-webkit-transform: scale(200);
}
}
/* Mozilla Third Animation */
@-moz-keyframes thirdAnimation {
0% {
z-index: 100;
-moz-transform: scale(0);
}
100%{
z-index: 0;
-moz-transform: scale(200);
}
}
/* MS Third Animation */
@-ms-keyframes thirdAnimation {
0% {
z-index: 100;
-ms-transform: scale(0);
}
100%{
z-index: 0;
-ms-transform: scale(200);
}
}
/* End of the Third Circle --------------------------------------------------------------------------------------------------------- */
/* Begin of Fourth Circle Animation ----------------------------------------------------------------------------------------------- */
.bubbles li:nth-child(4) {
width: 9%;
height: 20%;
position: absolute;
left: 10%;
top:60%;
animation-name: fourthAnimation;
}
/* Webkit Fourth Animation */
@-webkit-keyframes fourthAnimation {
0% {
z-index: 100;
-webkit-transform: scale(0);
}
100%{
z-index: 0;
-webkit-transform: scale(200);
}
}
/* Mozilla Fourth Animation */
@-moz-keyframes fourthAnimation {
0% {
z-index: 100;
-moz-transform: scale(0);
}
100%{
z-index: 0;
-moz-transform: scale(200);
}
}
/* MS Fourth Animation */
@-ms-keyframes fourthAnimation {
0% {
z-index: 100;
-ms-transform: scale(0);
}
100%{
z-index: 0;
-ms-transform: scale(200);
}
}
/* END of Fourth Animation ------------------------------------------------------------------------------------------------ */
/* Start of Fifth Animation -------------------------------------------------------------------------------------------------- */
.bubbles li:nth-child(5) {
width: 9%;
height: 20%;
position: absolute;
left: 50%;
top:10%;
animation-name: fifthAnimation;
}
/* Webki Fifth Animation */
@-webkit-keyframes fifthAnimation {
0% {
z-index: 100;
-webkit-transform: scale(0);
}
100%{
z-index: 0;
-webkit-transform: scale(200);
}
}
@-moz-keyframes fifthAnimation {
0% {
z-index: 100;
-moz-transform: scale(0);
}
100%{
z-index: 0;
-moz-transform: scale(200);
}
}
@-ms-keyframes fifthAnimation {
0% {
z-index: 100;
-ms-transform: scale(0);
}
100%{
z-index: 0;
-ms-transform: scale(200);
}
}
/* End of the Fith Circle ----------------------------------------------------------------------------------------------------- */
/* Start of the Sixth Circle ------------------------------------------------------------------------------------------------- */
.bubbles li:nth-child(6) {
width: 9%;
height: 20%;
position: absolute;
left: 80%;
top:60%;
animation-name: sixthAnimation;
}
/* Webkit sixth animation */
@-webkit-keyframes sixthAnimation {
0% {
z-index: 100;
-webkit-transform: scale(0);
}
100%{
z-index: 0;
-webkit-transform: scale(200);
}
}
/* Mozilla Sixth Animation */
@-moz-keyframes sixthAnimation {
0% {
z-index: 100;
-moz-transform: scale(0);
}
100%{
z-index: 0;
-moz-transform: scale(200);
}
}
/* MS Sixth Animation */
@-ms-keyframes sixthAnimation {
0% {
z-index: 100;
-ms-transform: scale(0);
}
100%{
z-index: 0;
-ms-transform: scale(200);
}
}
/* End of Sixth Animation ---------------------------------------------------------------------------------------------- */
#name{
color:white;
font-size: 6em;
position: relative;
top:30%;
text-shadow: 2px 2px grey;
z-index: 10;
}
#jobs li{
color:#262626;
}
#contact li{
color:#262626;
}
#press li{
color:#262626;
}
#legal li{
color:#262626;
}
#support li{
color:#262626;
}
#jobs-popup{
width: 100%;
height: 90%;
margin-top:5%;
position: fixed;
z-index: 10;
top:0;
left:0;
overflow-y: hidden;
}
.jobs-content{
width: 600px;
height: 560px;
margin: 20 auto;
position: relative;
top:0;
left:0;
background-color: white;
word-wrap: break-word;
overflow: auto;
z-index: 100;
display: none;
}
#x-icon1{
width:80px;
height: 80px;
position: absolute;
left:10%;
top:4%;
cursor: pointer;
display: none;
}
.whip{
margin: 0 auto;
color: black;
display: none;
}
#contact-popup {
width: 100%;
height: 90%;
margin-top:5%;
position: fixed;
z-index: 10;
top:0;
left:0;
overflow-y: hidden;
}
#contact-content{
width: 600px;
height: 560px;
margin: 20 auto;
position: relative;
top:0;
left:0;
background-color: white;
word-wrap: break-word;
overflow: auto;
z-index: 100;
display: none;
}
#x-icon2{
width:80px;
height: 80px;
position: absolute;
left:10%;
top:4%;
cursor: pointer;
display: none;
}
#press-popup{
width: 100%;
height: 90%;
margin-top:5%;
position: fixed;
z-index: 10;
top:0;
left:0;
overflow-y: hidden;
}
#press-content{
width: 600px;
height: 560px;
margin: 20 auto;
position: relative;
top:0;
left:0;
background-color: white;
word-wrap: break-word;
overflow: auto;
z-index: 100;
display: none;
}
#x-icon3{
width:80px;
height: 80px;
position: absolute;
left:10%;
top:4%;
cursor: pointer;
display: none;
}
#legal-popup{
width: 100%;
height: 90%;
margin-top:5%;
position: fixed;
z-index: 10;
top:0;
left:0;
overflow-y: hidden;
}
#legal-content{
width: 600px;
height: 560px;
margin: 20 auto;
position: relative;
top:0;
left:0;
background-color: white;
word-wrap: break-word;
overflow: auto;
z-index: 100;
display: none;
}
#x-icon4{
width:80px;
height: 80px;
position: absolute;
left:10%;
top:4%;
cursor: pointer;
display: none;
}
#support-popup{
width: 100%;
height: 90%;
margin-top:5%;
position: fixed;
z-index: 10;
top:0;
left:0;
overflow-y: hidden;
}
#support-content{
width: 600px;
height: 560px;
margin: 20 auto;
position: relative;
top:0;
left:0;
background-color: white;
word-wrap: break-word;
overflow: auto;
z-index: 100;
display: none;
}
#x-icon5{
width:80px;
height: 80px;
position: absolute;
left:10%;
top:4%;
cursor: pointer;
display: none;
}
2 answers
solution1
0 ACCPTED 2017-03-10 18:04:49
CSS rules that are declared later take precedence over those that were declared previously, and media queries don't add to precedence, so it's not working because
@media screen and (max-width: 415px) {
#name{
font-size: 2em;
}
}
comes before
#name{
color:white;
font-size: 6em;
position: relative;
top:30%;
text-shadow: 2px 2px grey;
z-index: 10;
}
in your file. Move the media query to after the other rule and it will work.
solution2
0 2017-03-10 18:14:00
而且您在js中编写了很多不需要的js，可以通过css3完成很多操作，尝试这样做，这样可以节省浏览器绘制页面的时间
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
HTML Not Responding To Media Query
Javascript Media Query no responding
How to disable jQuery properties in media query css
How to change media query CSS with jQuery
How to only use jquery .css() on a specific media query?
Refresh jQuery plugin after css media query request
CSS double the width of all elements with media query (or jQuery)
CSS Media Query and Javascript/jQuery don't match up
Question on CSS Media Query
CSS Media Print Query
Related Tags