addveventlistener not working on media queries above 768px

Question

I have tried the site on firefox 49 and and chrome 63, same isssue, if i click on each holder [flip card], it works on iphone4, galaxy 5 and iphone 8, using chrome,however, after a few tries, if i switch orientation from 640px, to 320px, portrait view, the top flip card will not work immediately, instead i have to wait upto 30secs, and then it will work..above 768px none of the cards work....

 /** * Created by User1 on 16/01/2018. */ //NAV //dom query var btn3= document.getElementById('btn3'); var btn= document.getElementById('btn'); var nav=document.getElementById('nav_bar'); //FLIP CARD //dom query var card_holder=document.getElementsByClassName('card_holder'); var grid=document.getElementById('grid_container'); //array from card front Array.from(card_holder).forEach(function(holder){ holder.addEventListener('click',function(e){ holder.firstElementChild.classList.toggle('switch'); holder.lastElementChild.classList.toggle('switchB'); console.log(holder) }); }); //nav event btn.addEventListener('click',function(){ //toggle menu nav.classList.toggle('viewer'); }); //btnbb3.addEventListener('click',function(){ //alert('hiya'); //grid.innerHTML+= '<p>hello</p>'; //}); //array from flip container //Array.from(flipContainer).forEach(function(addContainer) {}); 

 /* ===============Mobile Layout ================*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } img, embed, object, video { max-width: 100%; } .ie6{ width: 100%; } /* ============================================================ BODY ============================================================ */ body{ margin: 0; padding: 0; } #grid_container{ margin: 0; padding: 0; font-size: 18px; } /* ============================================================ HEADER ============================================================ */ header{ background-color: #ff3599; font-size: 36px; padding: 10px; color: whitesmoke; } /* ============================================================ NAVIGATION ============================================================ */ #nav_bar{ width: 100%; height: 100%; opacity: 0; position: absolute; z-index: 3; } #nav_bar.viewer{ background-color: #1c2c74; opacity: 0.7; } #nav_bar a{ color: whitesmoke; display: block; text-align: center; text-decoration: none; padding: 10px; font-size: 36px; } #nav_bar a:hover{ color: #ff3599; } /* ============================================================ ADVERT ANIMATION ============================================================ */ @keyframes im { 0%{ position: absolute; left: -100%; } 25%{ position: absolute; left: -75%; } 50%{ position: absolute; left: -50%; } 75%{ position: absolute; left: -25%; } 100%{ position: absolute; left: 0; } } @keyframes im { 0%{ position: absolute; left: -100%; } 25%{ position: absolute; left: -75%; } 50%{ position: absolute; left: -50%; } 75%{ position: absolute; left: -25%; } 100%{ position: absolute; left: 0; } } /* ============================================================ ADVERT ============================================================ */ .advert{ display: block; height: 350px; padding: 10px; background-color: #77a7c7; } .advert img{ height: inherit; } #img3{ width: 100%; animation-name: im3; animation-delay: 30s; animation-timing-function: ease; animation-duration: 30s; } #img1{ width: 100%; display: none; animation-name: im1; animation-timing-function: ease; animation-duration: 30s; } /* ============================================================ FLIP ============================================================ */ .flip_container{ display: flex; flex-direction: column; justify-content: space-around; padding: 10px; } .card_holder{ display: block; width: 300px; height: 400px; margin-bottom: 10px; } .card_front{ backface-visibility: hidden; background-color: #ff3599; width: inherit; height: inherit; position: absolute; transform: rotateY(0deg); } .card_back{ position: absolute; backface-visibility: hidden; background-color: #1c2c74; opacity: 0.7; width: inherit; height: inherit; transform: rotateY(-180deg); } .card_holder span{ text-align: center; display: inline-block; padding-top: 50%; color: whitesmoke; } .card_front.switch{ transform: rotateY(-180deg); } .card_back.switchB{ transform: rotateY(0deg); } /* ============================================================ INFO ============================================================ */ .info h2{ padding: 10px; background-color: #77a7c7; color: #f5f5f5; font-weight: 800; border-bottom: 1px solid whitesmoke; } .info p{ padding: 10px; background-color: #77a7c7; color: #f5f5f5; } /* ============================================================ FOOTER ============================================================ */ @media only screen and (min-width:360px){ .card_holder{ width: 340px; } } @media only screen and (min-width:480px){ .card_holder{ width: 460px; } } @media only screen and (min-width:640px){ .flip_container{ flex-direction: row; } .card_holder{ width: 200px; } } @media only screen and (min-width:768px){ .card_holder{ width: 240px; } } @media only screen and (min-width:1024px) { .card_holder{ width: 324px; } } @media only screen and (min-width:1280px){ .card_holder{ width: 410px; } } @media only screen and (min-width:1440px){ .card_holder{ width: 460px; } #grid_container{ background-color: #000011; } } 

 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/flip.css"/> <title></title> </head> <body> <!--grid container--> <div id="grid_container"> <!--header--> <header> <p id="btn">HHH</p> NSA.......... </header> <!--navigation--> <nav id="nav_bar"> <a>Home</a> <a>About us</a> <a>News</a> </nav> <!--advert container--> <div class="advert"> <img id="img1" src="images/2.jpg" alt=""/> <img id="img3" src="images/3.jpg" alt=""/> </div> <!--flip container--> <div class="flip_container" id="flipCon"> <div class="card_holder"> <div class="card_front"><span>CARD 1 Front</span></div> <div class="card_back"><span>CARD 1 Back</span></div> </div> <div class="card_holder"> <div class="card_front"><span>CARD 2 Front</span></div> <div class="card_back"><span>CARD 2 Back</span></div> </div> <div class="card_holder" > <div class="card_front"><span>CARD 3 Front</span></div> <div class="card_back"><span>CARD 3 Back</span></div> </div> </div> <div class="info"> <h2>Heading</h2> <p> Aenean nec sollicitudin dolor. Praesent interdum accumsan odio, ut tristique lorem auctor sed. Vivamus dictum arcu venenatis ipsum pellentesque fringilla. Mauris rhoncus felis a rhoncus tristique. Etiam pretium convallis pretium. Donec feugiat ligula lorem, sed vestibulum leo rhoncus nec. Aliquam vehicula convallis leo ut ultricies. Cras vel justo sit amet risus cursus commodo in a nunc. Sed interdum consectetur nisl id ultricies. Nullam sit amet mi in massa facilisis maximus. </p> </div> <div class="info"> <h2>Heading</h2> <p> Aenean nec sollicitudin dolor. Praesent interdum accumsan odio, ut tristique lorem auctor sed. Vivamus dictum arcu venenatis ipsum pellentesque fringilla. Mauris rhoncus felis a rhoncus tristique. Etiam pretium convallis pretium. Donec feugiat ligula lorem, sed vestibulum leo rhoncus nec. Aliquam vehicula convallis leo ut ultricies. Cras vel justo sit amet risus cursus commodo in a nunc. Sed interdum consectetur nisl id ultricies. Nullam sit amet mi in massa facilisis maximus. </p> </div> <div class="info"> <h2>Heading</h2> <p> Aenean nec sollicitudin dolor. Praesent interdum accumsan odio, ut tristique lorem auctor sed. Vivamus dictum arcu venenatis ipsum pellentesque fringilla. Mauris rhoncus felis a rhoncus tristique. Etiam pretium convallis pretium. Donec feugiat ligula lorem, sed vestibulum leo rhoncus nec. Aliquam vehicula convallis leo ut ultricies. Cras vel justo sit amet risus cursus commodo in a nunc. Sed interdum consectetur nisl id ultricies. Nullam sit amet mi in massa facilisis maximus. </p> </div> <!--footer--> <footer></footer> </div> </body> <script src="js/flip.js"></script> </html> 

Answer 1

.the problem was from the navigation bar [#nav_bar]being postioned absolute and the height being set to 100%, with a z-index of 3,when toggled and opacity is 1, i can see it covers the flip card surface area, i have changed the height of the nav_bar to 50%, at 70% it would still cover the top half of the flip card. Everything now works fine, the animation caused no issue, many thanx Shilly, for the direction where to look to address the problem...