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

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

My website looks to small on a phone screen

I followed all the courses until now I did everything as told and the website on a cellphone looks to small as something like that happened to someone of you?

6 Answers

Dylan Van Es
Dylan Van Es
11,085 Points

Your 'head' isn't quite set up right. Try this:

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="utf-8">
  <title>Yeshaya Coffman | Designer</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/main.css">
</head>

<header>
  <a href="index.html" id="logo">
    <h1>Yeshaya Coffman</h1>
    <h2>Designer</h2>
  </a>
  <nav>
    <ul>
      <li><a href="index.html" class="selected">Portfolio</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</header>
<div id="wrapper">
  <section>
    <ul id="gallery">
      <li>
        <a href="img/numbers-01.jpg">
          <img src="img/numbers-01.jpg" alt="">
          <p>Experimentation with texture and color</p> 
        </a>  
      </li>
      <li>
        <a href="img/numbers-02.jpg">
          <img src="img/numbers-02.jpg" alt="">
          <p>Playing with blending modes in photoshop</p> 
        </a>  
      </li>
      <li>
        <a href="img/numbers-06.jpg">
          <img src="img/numbers-06.jpg" alt="">
          <p>Trying to create an 80's style of glows</p> 
        </a>  
      </li>
      <li>
        <a href="img/numbers-09.jpg">
          <img src="img/numbers-09.jpg" alt="">
          <p>Drips created using Photoshop brushes</p> 
        </a>  
      </li>
      <li>
        <a href="img/numbers-12.jpg">
          <img src="img/numbers-12.jpg" alt="">
          <p>Creating shapes using repetition</p> 
        </a>  
      </li>
    </ul>
  </section>
  <footer>
    <a href="https://www.facebook.com/profile.php?id=100009203640846">
      <img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon">
    </a>
    <p>&copy; 2015 Yeshaya Coffman.</p>
  </footer>
</div>
Scott Dinerstein
Scott Dinerstein
1,250 Points

Thank you for this, had the same issue as the OP. Guess I missed the same step :)

Dylan Van Es
Dylan Van Es
11,085 Points

Sounds like you haven't set the viewport. Place this in the "head" tag:

<p>
<meta name="viewport" content="width=device-width, initial-scale=1">
</p>

More info here:

https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

I can't see what you wrote on the code

Kevin Korte
Kevin Korte
28,148 Points

I know you can't see his code, but this is what Dylan put

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

just make sure you wrap that meta tag in < >. I had to remove it because the forum parses it away when you add them. Try that, and give him credit for it. It's there, it's just the way markdown parses stuff like that.

Dylan Van Es
Dylan Van Es
11,085 Points

Thanks Kevin, I can't figure out how to get the code to show. Follow the link to see how to use it properly.

Kevin Korte
Kevin Korte
28,148 Points

No worries Dylan. Sometimes the markdown parse does unexpected things.

It doesn't work I put the meta tag viewport after and before the meta charset tag and it didn't do anything and why in the video they didn't say anything about that also I'm using Safari

Kevin Korte
Kevin Korte
28,148 Points

So what does your code look like?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Yeshaya Coffman | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Yeshaya Coffman</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with texture and color</p> </a>
</li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in photoshop</p> </a>
</li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80's style of glows</p> </a>
</li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using Photoshop brushes</p> </a>
</li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repetition</p> </a>
</li> </ul> </section> <footer> <a href="https://www.facebook.com/profile.php?id=100009203640846"> <img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"> </a> <p>Ā© 2015 Yeshaya Coffman.</p> </footer> </div> </body>

</html>

and the CSS File:

/***************************************** GENERAL ******************************************/

body { font-family: 'Open Sans', sans-serif; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

a { text-decoration: none; }

img { max-width: 100%; }

h3 { margin: 0 0 1em 0; } /***************************************** HEADING ******************************************/

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center; margin: 0; }

h1{ font-family: 'Changa one', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2{ font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }

/***************************************** NAVIGATION ******************************************/

nav{ text-align: center; padding: 10px 0; margin: 20px 0 0; } nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

nav a { font-weight: 800; padding: 15px 10px; } /***************************************** FOOTER ******************************************/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

.social-icon { width: 20px; height:20px; margin: 0 5px; }

/***************************************** PAGE POFRTFOLIO ******************************************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7;
}

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; }

/***************************************** ABOUT ******************************************/

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100% }

/***************************************** CONTACT ******************************************/

.contact-info { list-style: none; margin: 0; padding: 0; font-size: 0.9em; }

.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; }

.contact-info li.phone a{ background-image: url('../img/phone.png'); }

.contact-info li.mail a{ background-image: url('../img/mail.png'); }

.contact-info li.twitter a{ background-image: url('../img/twitter.png'); }

/***************************************** COLORS ******************************************/

/* site body */ body { background-color: white; color: #999; }

/* green header */ header { background: #6ab47b; border-color: #599a68 }

/* nav background on mobile devices */ nav { background: #599a68; }

/******TEXT******/

/logo text/ h1,h2 { color:#fff; }

/* links */ a { color: #6ab47b; }

/* nav link / nav a, nav a:visited { color: #fff; } / selected nav link */ nav a.selected, nav a:hover { color: #32673f }

thanks for helping!

it worked thank you but I don't get why they didn't talk about that on the videos!

Dylan Van Es
Dylan Van Es
11,085 Points

You may have missed a small step, but if not it might be a good idea to provide some feedback.