@media query working in a strange way

Question

Over the Christmas period, I paused working on my website. I came back to it this week, to find that the code had been changed, somehow. I've included all the code, but the main parts I want to address are the .fadein css, particularly, the snippet below.

@media screen and (min-width: 1110px) {
.fadein img {
    width:auto;
    height:72.1%;
    position:absolute;
    left:50%;
    -webkit-transform: translate(-50%, -0%);
    -moz-transform: translate(-50%, -0%);
    margin:0;
    padding:0;
}

Something in this code is causing my slideshow/images to show up as tiny thumbnail size images, instead of the full-screen size they were meant to be. On removing the width and/or height properties, the image goes larger than I like, but I can't scale it. Any ideas? The rest of the code is below, if required. Thanks!

 $(function() { $('.fadein img:gt(0)').hide(); setInterval(function() { $('.fadein :first-child').fadeOut(2000) .next('img').fadeIn(2000) .end().appendTo('.fadein'); }, 5000); }); 

 html { margin:0; padding:0; height:100%; width:100%; position:relative; } body { margin:0; padding:0; height:100%; width:100%; position:absolute; bottom:0; top:0; left:0; right:0; } p { margin:0; padding:0; color:#1C1C1C; } img { margin:0; padding:0; } .maincontainer { margin:0; padding:0; position:relative; } .container { width:100%; min-height:100%; position:relative; margin:0; padding:0; } .container:after { content:""; display:block; } .logo { float:left; margin-left:30px; font-family:'Advent Pro', sans-serif; font-weight:100; font-size:40px; color:#1C1C1C; } .photography { width:100px; float:left; margin-top:7px; margin-left:10px; padding-left:10px; font-family:'Advent Pro', sans-serif; font-weight:100; font-size:16px; color:#1C1C1C; border-left:1px solid #1C1C1C; } @media screen and (min-width:768px) { .logo { float:left; margin-left:15px; font-family:'Advent Pro', sans-serif; font-weight:100; color:#1C1C1C; } } .name { float:left; margin:5px 10px 0px 10px; font-size:37px; } .type { float:left; width:50px; margin-top:6px; padding:1px 0px 1px 10px; font-size:15px; border-left:1px solid #1C1C1C; } .nav { float:right; margin:0; padding:0; list-style:none; width:300px; } @media screen and (min-width:500px) { .nav { float:right; margin:0; padding:0; list-style:none; width:444px; } } .nav li { float:left; padding:16px 10px 13px 10px; font-family:'Advent Pro', sans-serif; font-weight:200; font-size:17px; color:#1C1C1C; } .nav li:hover { border-bottom:2px solid #1C1C1C; } @media screen and (min-width:500px) { .nav li { float:left; padding:16px 25px 13px 25px; font-family:'Advent Pro', sans-serif; font-weight:200; font-size:17px; color:#1C1C1C; } } .reposition { position:absolute; left:50%; -webkit-transform: translate(-50%, -0%); -moz-transform: translate(-50%, -0%); } @media screen and (min-width: 768px) { .reposition { position:static; float:right; -webkit-transform: translate(-0%, -0%); -moz-transform: translate(-0%, -0%); } } .navbar-toggle { margin-top:13px; position:absolute; right:0; } .collapse { height:56px; width:100%; } .navbar-header { float:left; display:inline-block; height:55px; padding:0; margin:0; } .mainbody { width:100%; padding:0 0 20px 0; margin:0; float:left; } .slideshow { width:100%; margin:0; padding:0; } .fadein { width:100%; margin:0; padding:0; } .fadein img { width:93.8%; height:auto; position:absolute; left:50%; -webkit-transform: translate(-50%, -0%); -moz-transform: translate(-50%, -0%); margin:0; padding:0; } @media screen and (min-width: 1110px) { .fadein img { width:auto; height:72.1%; position:absolute; left:50%; -webkit-transform: translate(-50%, -0%); -moz-transform: translate(-50%, -0%); margin:0; padding:0; } } @media screen and (min-width: 1441px) { .fadein img { width:72.3%; height:auto; position:absolute; left:50%; -webkit-transform: translate(-50%, -0%); -moz-transform: translate(-50%, -0%); margin:0; padding:0; } } .mainfooter { width:100%; height:20px; position:absolute; bottom:0; margin:0; padding:0; float:left; position:fixed; } .footer { position:relative; bottom:1px; float:right; width:100%; height:20px; padding:0 10px 0 0; background-color:#F8F8F8; border:1px solid #E7E7E7; margin:0; } .copyright { float:right; font-family: 'Advent Pro', sans-serif; font-weight: 100; font-size:12px; margin:0; padding:0; } @media screen and (min-width: 1441px) { .copyright { float:right; font-family: 'Advent Pro', sans-serif; font-weight:200; font-size:12px; margin:0; padding:0; } } .media li { float:left; list-style:none; position:relative; left:10px; bottom:2px; margin:0 3px 0 3px; padding:0; } @media only screen and (max-width:480px) { .media li { display:none; } } .media { padding:0; margin:0; } 

 <!DOCTYPE html> <html lang="en"> <head> <title>Tim Corin Wildlife Photography</title> <meta charset="utf-8"> <meta name="description" content="Award-winning wildlife, landscape, and event photographer based in Julatten, North Queensland, Australia."> <meta name="keywords" content="wildlife, bird, animal, photo, photography, photographer, camera, julatten, queensland, australia, events, landscape, affordable, cairns, port douglas, mossman"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='https://fonts.googleapis.com/css?family=Poiret+One|Josefin+Slab|Cinzel|Jura:400,300|Nixie+One|Advent+Pro:100,300,200' rel='stylesheet' type='text/css'> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="styles.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="scripts.js"></script> <script src="js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </head> <body> <div class="maincontainer"> <div class="mainheader"> <div class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <a href="index.html"> <p class="logo">Tim Corin</p> <p class="photography">Wildlife Photography</p> </a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse"> <div class="reposition"> <ul class="nav navbar-nav"> <a href=""><li class="home">Home</li></a> <a href=""><li class="gallery">Gallery</li></a> <a href=""><li>About</li></a> <a href=""><li>Contact</li></a> <a href=""><li>Blog</li></a> </ul> </div> </div> </div> </div> </div> <div class="mainbody"> <div class="slideshow"> <div class="fadein"> <img src="images/frog.jpg" /> <img src="images/sunrays.jpg" /> <img src="images/beeeater.jpg" /> <img src="images/sunrise.jpg" /> <img src="images/darter.jpg" /> <img src="images/milkyway.jpg" /> </div> </div> </div> <div class="mainfooter"> <div class="footer"> <div class="social"> <ul class="media"> <p class="copyright">Copyright Tim Corin Photography 2016. All Rights Reserved.</p> <a href="http://www.facebook.com/timcorinphotography" target="_blank"><li class="facebook"><img src="images/facebook.png" height="16px"/></li></a> <a href="http://www.instagram.com/timcorinphotography" target="_blank"><li class="instagram"><img src="images/instagram.png" height="16px"/></li></a> <a href="http://www.twitter.com/timcorinphoto" target="_blank"><li class="twitter"><img src="images/twitter.png" height="16px"/></li></a> </ul> </div> </div> </div> </div> </body> </html> 

Answer 1

I think that you're not closing the media query.

@media screen and (min-width: 1110px) {
    .fadein img {
        width:auto;
        height:72.1%;
        position:absolute;
        left:50%;
        -webkit-transform: translate(-50%, -0%);
        -moz-transform: translate(-50%, -0%);
        margin:0;
        padding:0;
    }
    }