Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

Posted by Zach Kamp
Zach Kamp
5,259 Points

Going live with website.

I built a site and tested it's responsiveness the entire way by resizing the window. I even used chrome's dev tools to preview a variety of devices. I have the viewport meta tag and media queries are working. However, once I went live with the site and tested it on my iphone, only 3/4 of the site's content loaded leaving a white bar of nothing on the right side for the entire length of the site. If anyone has an idea of how to help I will gladly post some code snippets. Thanks.

html
<!DOCTYPE html>
<html>
  <head>
    <title>Meet Zimni</title>
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport" content="width=device-width">
    <link href='http://fonts.googleapis.com/css?family=Josefin+Sans:100,400' rel='stylesheet' type='text/css'>
  </head>

css
@media (max-width: 1024px) {
  .primary-content,
  .secondary-content {
    width: 90%;
}
  .features {
    float: none;
    width: 100%;
    margin: auto;
    padding: auto;
  }
  .features#middle-guy {
    border: none;
  }
  .row {
    margin: 0;
  }
  .intro {
    padding-top: 5%;
  }
  .form {
    width: 100%;
    padding-bottom: 5%;
  }
  .twitter-cta {
    padding: 10% 12%;
    margin: 50px  0 20px;
}
}

@media (max-width: 768px) {
  .logo {
    position: static;
    margin: -6% auto;
    padding: 0;
  }
  .primary-content,
  .secondary-content {
    width: 100%;
    padding: 20px;
    border-top: none;
}
  .main-header {
    max-height: 380px;
    padding: 50px 25px 0;
}
  .title {
    font-size: 1.3rem;
    border: none;
}
  h1 {
    font-size: 1.7rem;
    line-height: 1.1; 
}
  .arrow {
    display: none;
}
  .intro {
    font-size: 1rem;
}
  .features {
    float: none;
    width: 100%;
    margin: 0 auto;
    padding: 0 auto;
  }
  .features#middle-guy {
    border: none;
  }
  .form {
    width: 100%;
  }
  .twitter-cta {
    width: 100%;
  }
  .twitter-cta h2 {
    font-size: 2.2rem;
  }
  .main-footer {
    padding: 20px 0;
}
}

3 Answers

miguelcastro2
PLUS
miguelcastro2
Courses Plus Student 6,573 Points
miguelcastro2
miguelcastro2
Courses Plus Student 6,573 Points

Post code.

Zach Kamp
Zach Kamp
5,259 Points

Any specific areas? There is quite a bit. I'll start with html head and media queries.

html
<!DOCTYPE html>
<html>
  <head>
    <title>Meet Zimni</title>
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport" content="width=device-width">
    <link href='http://fonts.googleapis.com/css?family=Josefin+Sans:100,400' rel='stylesheet' type='text/css'>
  </head>

css
@media (max-width: 1024px) {
  .primary-content,
  .secondary-content {
    width: 90%;
}
  .features {
    float: none;
    width: 100%;
    margin: auto;
    padding: auto;
  }
  .features#middle-guy {
    border: none;
  }
  .row {
    margin: 0;
  }
  .intro {
    padding-top: 5%;
  }
  .form {
    width: 100%;
    padding-bottom: 5%;
  }
  .twitter-cta {
    padding: 10% 12%;
    margin: 50px  0 20px;
}
}

@media (max-width: 768px) {
  .logo {
    position: static;
    margin: -6% auto;
    padding: 0;
  }
  .primary-content,
  .secondary-content {
    width: 100%;
    padding: 20px;
    border-top: none;
}
  .main-header {
    max-height: 380px;
    padding: 50px 25px 0;
}
  .title {
    font-size: 1.3rem;
    border: none;
}
  h1 {
    font-size: 1.7rem;
    line-height: 1.1; 
}
  .arrow {
    display: none;
}
  .intro {
    font-size: 1rem;
}
  .features {
    float: none;
    width: 100%;
    margin: 0 auto;
    padding: 0 auto;
  }
  .features#middle-guy {
    border: none;
  }
  .form {
    width: 100%;
  }
  .twitter-cta {
    width: 100%;
  }
  .twitter-cta h2 {
    font-size: 2.2rem;
  }
  .main-footer {
    padding: 20px 0;
}
}
miguelcastro2
miguelcastro2
Courses Plus Student 6,573 Points

Have you tried validating the HTML? Sometimes the validator can find tags that are not being closed. Obvious reasons could be an image or HTML element that has a fixed size. I am leaning towards HTML that is not completely closed, an extra div that may have been overlooked.

Zach Kamp
Zach Kamp
5,259 Points

Ok cool. I'll try that. Thanks.

Richard Nicholls
Richard Nicholls
1,289 Points
Richard Nicholls
Richard Nicholls
1,289 Points

There are 2 places where you have padding: auto, not sure this is a valid declaration

Richard Nicholls
Richard Nicholls
1,289 Points
Richard Nicholls
Richard Nicholls
1,289 Points

Also try changing the viewport to

meta name="viewport" content="width-device-width, initial-scale=1.0"