div disappearing in mobile layout?

css, html

Solution

OK I figured the problem out. Your styles works fine, all percentage are ok and stuff. The problem is the media query.

When you do your media query, you set `#page` height to `height:50%`. In order to set the height of an element in %, it's parent needs to have a fixed height OR a % it self ( but in this case the parent of the parent needs to have an height, and so on)

Your initial CSS was ok with that because `html` , `body` , `#page` were set to `height:100%`, so you have been free to set `#slideshow` to `height:100%`.

BUT (and that's the point): In your media query you set `html` , `body` , `#page` to `height:auto`. Doing this, your `#slideshow` can't do any percent of the height. How can it do a percentage of nothing? The result is that your `#slideshow` just disappears from screen.

A possible solution colud be to set a fixed height to `html` , `body` , `#page` or just leave them to `height:100%` (which I suggest) so you will be free to set `#slideshow` height to `height:50%` as you wished.

Problem

I am currently working on css using media queries to change the layout of a site for mobile devices. Everything is working fine apart from when I test on my mobile phone, the div with id #slideshow is disappearing, like it's css is set to display:none. I've looked at my code and been playing around with it for an hour now and whatever I try I can't seem to get it to display! Is there anything you guys can see that could cause this? html looks like this: ``` <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial‐scale=1.0, width=device‐width"/> <title>****</title> </head> <body> <script src="jquery-1.10.2.min.js"></script> <script> function windowH() { var wH = $(window).height(); $('.sideBar, .slideshow').css({height: wH}); } windowH(); </script> <div id="page"> <div id="sidebar"> <div id="logo"> <img id="logoimg" src="Images/logo2.png"> </div> <div id="nav"> <div class="linkdiv" id="homelink"> <a class="link" href=""><p>Home</p></a> </div> <div class="linkdiv" id="aboutlink"> <a class="link" href=""><p>About</p></a> </div> <div class="linkdiv" id="gallerylink"> <a class="link" href=""><p>Gallery</p></a> </div> <div class="linkdiv" id="priceslink"> <a class="link" href=""><p>Prices</p></a> </div> <div class="linkdiv" id="reviewslink"> <a class="link" href=""><p>Reviews</p></a> </div> <div class="linkdiv" id="contactlink"> <a class="link" href="contact.html"><p>Contact</p></a> </div> <div class="linkdiv" id="clientslink"> <a class="link" href=""><p>Clients</p></a> </div> </div> <div id="icons"> <span class="mediaicon" id="twitter"> <a class="iconlink" href="http://www.twitter.com/"> <img class="icon" src="Images/ticon2.png"></a> </span> <span class="mediaicon" id="facebook"> <a class="iconlink" href="http://www.facebook.com/"> <img class="icon" src="Images/ficon2.png"></a> </span> <span class="mediaicon" id="pintrest"> <a class="iconlink" href="http://www.pintrest.com/"> <img class="icon" src="Images/picon2.png"></a> </span> <span class="mediaicon" id="wordpress"> <a class="iconlink" href="http://****.wordpress.com"> <img class="icon" src="Images/wicon2.png"></a> </span> </div> </div> <div id="moblogo"> <img id="moblogoimg" src="Images/logo2.png"> </div> <div class="mobilemenu"> <a class="link" href="#priceslink"><p>Menu</p></a> </div> <div id="slideshow"> </div> <div id="mobnav"> <div class="linkdiv" id="homelink"> <a class="link" href=""><p>Home</p></a> </div> <div class="linkdiv" id="aboutlink"> <a class="link" href=""><p>About</p></a> </div> <div class="linkdiv" id="gallerylink"> <a class="link" href=""><p>Gallery</p></a> </div> <div class="linkdiv" id="priceslink"> <a class="link" href=""><p>Prices</p></a> </div> <div class="linkdiv" id="reviewslink"> <a class="link" href=""><p>Reviews</p></a> </div> <div class="linkdiv" id="contactlink"> <a class="link" href="contact.html"><p>Contact</p></a> </div> <div class="linkdiv" id="clientslink"> <a class="link" href=""><p>Clients</p></a> </div> </div> <div id="mobicons"> <span class="mediaicon" id="twitter"> <a class="iconlink" href="http://www.twitter.com/"> <img class="icon" src="Images/ticon2.png"></a> </span> <span class="mediaicon" id="facebook"> <a class="iconlink" href="http://www.facebook.com/"> <img class="icon" src="Images/ficon2.png"></a> </span> <span class="mediaicon" id="pintrest"> <a class="iconlink" href="http://www.pintrest.com/"> <img class="icon" src="Images/picon2.png"></a> </span> <span class="mediaicon" id="wordpress"> <a class="iconlink" href="http://****.wordpress.com"> <img class="icon" src="Images/wicon2.png"></a> </span> </div> </div> </body> </html> ``` and my css is as follows: ``` html { height: 100%; margin: 0; padding: 0; } body { height: 100%; margin: 0; padding: 0; -webkit-text-size-adjust: 100%; } p { display: inline; } #page { width: 100%; height: 100%; margin: 0; padding: 0; } #sidebar { float: left; width: 20%; height: 100%; padding-bottom: 10; margin: 0; background-image: url(Images/back2.jpg); } #slideshow { float: right; width: 80%; height: 100%; margin: 0; padding: 0; background-image: url(Images/sl1.jpg); animation: slideshow 60s; animation-iteration-count: infinite; -webkit-animation: slideshow 60s; -webkit-animation-iteration-count: infinite; background-size: cover; } #logoimg { width: 80%; margin-top: 7%; margin-left: 10%; margin-right: 10%; } #moblogo { display: none; } .linkdiv { font-family: canter; font-size: 2em; text-align: center; padding-top: 5%; padding-bottom: 2%; color: rgba(255,255,255,1.00); } .mobilemenu { display: none; } a:link { color: rgba(109,110,112,1.00); text-decoration: none; } a:visited { color: rgba(109,110,112,1.00); text-decoration: none; } a:hover { color: rgba(167,167,168,1.00); text-decoration: none; } a:active { color: rgba(109,110,112,1.00); text-decoration: none; } .icon { width: 15%; } #icons { margin-left: 27%; margin-top: 10%; padding: 0; } #mobicons { display: none; } #mobnav { display: none; } @media only screen and (max-device-width: 640px) and (orientation: portrait) { html { height: auto; } body { height: auto; } #page { width: 100%; height: auto; } #sidebar { display: none; } #moblogo { width: 100%; background-image: url(Images/mobbg1.jpg); background-size: cover; position: static; display: block; } #slideshow { float: none; width: 100%; height: 50%; position: static; display: block; } #moblogoimg { width: 70%; margin-top: 0.2em; margin-left: 15%; margin-right: 15%; } .linkdiv { font-size: 0.5em; padding-top: 0.2em; padding-bottom: 0.2em; } #mobnav { display: block; position: static; text-align: center; } .mobilemenu { font-family: canter; font-size: 0.5em; text-align: center; padding-top: 0; padding-bottom: 0; display: block; background-image: url(Images/iconbgipadport.jpg); background-size: cover; position: static; } #mobicons { display: block; position: static; } } @keyframes slideshow { 0% {background-image: url(Images/sl1.jpg);} 8.3% {background-image: url(Images/sl2.jpg);} 16.7% {background-image: url(Images/sl3.jpg);} 25% {background-image: url(Images/sl4.jpg);} 33.3% {background-image: url(Images/sl5.jpg);} 41.7% {background-image: url(Images/sl6.jpg);} 50% {background-image: url(Images/sl7.jpg);} 58.3% {background-image: url(Images/sl8.jpg);} 66.7% {background-image: url(Images/sl9.jpg);} 75% {background-image: url(Images/sl10.jpg);} 83.3% {background-image: url(Images/sl11.jpg);} 91.7% {background-image: url(Images/sl12.jpg);} 100% {background-image: url(Images/sl1.jpg);} } @-webkit-keyframes slideshow { 0% {background-image: url(Images/sl1.jpg);} 8.3% {background-image: url(Images/sl2.jpg);} 16.7% {background-image: url(Images/sl3.jpg);} 25% {background-image: url(Images/sl4.jpg);} 33.3% {background-image: url(Images/sl5.jpg);} 41.7% {background-image: url(Images/sl6.jpg);} 50% {background-image: url(Images/sl7.jpg);} 58.3% {background-image: url(Images/sl8.jpg);} 66.7% {background-image: url(Images/sl9.jpg);} 75% {background-image: url(Images/sl10.jpg);} 83.3% {background-image: url(Images/sl11.jpg);} 91.7% {background-image: url(Images/sl12.jpg);} 100% {background-image: url(Images/sl1.jpg);} } ``` Any help or criticism greatly appreciated.

Original source