Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website Responsive Web Design and Testing Website Testing

Posted by john larson
john larson
16,594 Points

Checking project for various mobile devices : iPad only one that looks off

I was checking responsive design with the "inspect element" for the various tablets and such. Everything looks great on every screen except iPad. With iPad there is a huge gap between the main content and the footer. Is this an iPad thing? Anyone else experience this or have any ideas? It's a side project I'm working on.

 <!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>where is dan?</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
  <link href='https://fonts.googleapis.com/css?family=Alegreya+Sans|Dosis|Raleway' rel='stylesheet' type='text/css'>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


</head>
<body>
<div id="wrapper" class="sticky-footer">

<header>
<div id="profile-photo">
    <img src="img/puppy.jpg" alt="puppy">
</div>
<h1>What ever happened to Dan,</h1>
<h2>that great massage therapist from massage green in Brighton?</h2>
</header>
<h3>Where is Dan?</h3>
<section id="turns-out">

    <p>As it turns out he's doing well and is now seeing massage clients at LaVida.</p> <p>After a succsessful stay at masssage green,  Dan had creative differences with management and mutually agreed to move on.</p>  <p>He is quickly growing a new clintelle but misses the connection he had with his previous clients</p>
</section>
<h3>How can I get in touch with Dan?</h3>
<section id="make-appt">
<ul>
    <li>You can make an appointment with Dan by calling:</li>
    <li>Lavida Massage at <a href="tel:810-229-0888">810-229-0888</a></li>

</ul>
    <p id="distinction">Lavida is located at:</p>
<ul>
    <li>9864 E Grand River Ave #150,</li>
    <li>Brighton, MI 48116</li>
    <li>Grand Crossing </li>
</ul>
</section>
<p id="disclamer">Disclamer: This was NOT written by Dan, rather by someone that appreciates his work</p>
</div><!--end wrapper-->
<footer><p>smolderingflax.com</p><p class="white">web development</p></footer>
<script src="js/script.js" type="text/javascript"></script> 
 </body>
</html>

/*sets the backbround w/ a backup */
body {
    margin: 0;
    padding: 0;
    background: rgba(150, 100, 50, 0.2);
    background-image: url("../img/forest.JPEG");
    background-repeat: no-repeat;
    background-size: cover;
}
/*font for all p*/
p {
    font-family: "Alegreya Sans";
}
/*font for all li*/
li {
    font-family: "Dosis";
}
/*encapsulates entire page EXCLUDING footer*/
#wrapper {
    width: 90%;
    max-width: 650px;
    margin: 0 auto;
}
/*close gaps, move text slightly away from left border*/
h1, h2, h3 {
    font-family: "Raleway";
    margin: 0;
    padding-left: 10px;
}
/*style h3's move text a little further in for effect*/
h3 {
    background: #6c3;
    margin-top: 15px;
    padding: 10px 0;
    padding-left: 25px;
}
#profile-photo img {
    width: 220px;
    display: block;

    margin-left: 1%;
    padding-top: 7px;
}
header {

    /*background: rgba(150, 100, 50, 0.2);*/
    background: rgba(255, 255, 255, 0.7);
}
#turns-out {
    /*background: rgba(150, 100, 50, 0.1);*/
    background: rgba(255, 255, 255, 0.7);

    margin-top: 15px;
}
#turns-out p {
    margin: 5px;
    padding: 3px;
}


#make-appt {
    /*background: rgba(150, 100, 50, 0.1);*/
    background: rgba(255, 255, 255, 0.7);
}
#distinction {
    background: #fed;
    display: inline;
}
#disclamer {
    font-style: italic;
    color: #fff;
    font-size: 0.7rem;
    background: rgba(0, 0, 0, 0.7);
}
.sticky-footer {
    min-height: calc(100vh - 50px);
}

footer {
  width: 90%;
  max-width: 650px;
  padding: 5px 0;
  margin: 0 auto;
  font-size: 0.7rem;
  text-align: right;
  color: #000;
  background: linear-gradient(to top , #000, #ccc, transparent);

}

footer p {
  padding: 0;
  margin: 0;
}
.white {
  color:#ccc;
}
Javier Alvarado
Javier Alvarado
16,060 Points
Javier Alvarado
Javier Alvarado
16,060 Points

A lot of websites always look just a little bit off on my iPad. I'm not sure why though.

john larson
john larson
16,594 Points

Hi Javier, It's funny about apple. I fixed it on the i pad then I had a chance to look at it on a mac and it was all messed up.
I know apple is a good product, might have been screen density or something I don't quite understand.

2 Answers

David Bath
David Bath
25,940 Points
David Bath
David Bath
25,940 Points

I haven't experienced this, but my guess is that it has something to do with using vh inside the calculation in the sticky-footer class. Is Safari up to date on your iPad?

Look at the known issues here, in particular 2, 5, and 11: http://caniuse.com/#search=vh

john larson
john larson
16,594 Points
john larson
john larson
16,594 Points

Thanks David, I didn't even know there were other options besides vh. Every time I think I know a little bit of something...I find out I don't even know that.