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
Yeshaya Coffman
Full Stack JavaScript Techdegree Graduate 22,885 PointsMy 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
11,085 PointsYour '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>© 2015 Yeshaya Coffman.</p>
</footer>
</div>
Dylan Van Es
11,085 PointsSounds 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
Yeshaya Coffman
Full Stack JavaScript Techdegree Graduate 22,885 PointsI can't see what you wrote on the code
Kevin Korte
28,149 PointsI 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
11,085 PointsThanks 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
28,149 PointsNo worries Dylan. Sometimes the markdown parse does unexpected things.
Yeshaya Coffman
Full Stack JavaScript Techdegree Graduate 22,885 PointsIt 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
28,149 PointsSo what does your code look like?
Yeshaya Coffman
Full Stack JavaScript Techdegree Graduate 22,885 Points<!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!
Yeshaya Coffman
Full Stack JavaScript Techdegree Graduate 22,885 Pointsit worked thank you but I don't get why they didn't talk about that on the videos!
Dylan Van Es
11,085 PointsYou may have missed a small step, but if not it might be a good idea to provide some feedback.
Scott Dinerstein
1,250 PointsScott Dinerstein
1,250 PointsThank you for this, had the same issue as the OP. Guess I missed the same step :)