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

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,301 Points
Richard Nicholls
Richard Nicholls
1,301 Points

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

Richard Nicholls
Richard Nicholls
1,301 Points
Richard Nicholls
Richard Nicholls
1,301 Points

Also try changing the viewport to

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