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
Stuart McPherson
15,939 PointsMy site doesn't seem to scale properly when changing the browser size. I've tried this in chrome and firefox.
Here is my code. Any help would be appreciated!
index.html:
<!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>Stuart McPherson | 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>Stuart McPherson</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 colour and texture</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 repitition</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2015 Stuart McPherson</p>
</footer>
</div>
</body> </html>
main.css:
/************************************************************************************ GENERAL ************************************************************************************/
wrapper {
width: 940px; margin: 0 auto; padding: 0 8%; }
a { text-decoration: none; }
img { max-width: 100%; } /************************************************************************************ Header ************************************************************************************/
header { background-color:#6ab47b; /* green background for header */ }
h1, h2 { color: #ffffff; /* white text colour for h1 & h2 which appear inside header */ }
h1 { font-family: 'Changa One', sans-serif; /* Setting font to Changa One, if google can't suuply this font then it will default to Sans-serif / margin: 15px 0; / Adding some spacing above and below the h1 / font-size: 1.75em; / Setting font size to '1.75'. 'em' is unit measurment*/ font-weight: normal; /* Will set the weight to normal making everything unbold / line-height: 0.8em; / Setting line space '0.8'. 'em' is unit measurment*/ }
h2 { font-family: 'Changa One', sans-serif; /* Setting font to Changa One, if google can't suuply this font then it will default to Sans-serif / margin: -5px 0 0; / removing some spacing above the h1 / font-size: 0.75em; / Setting font size to '1.75'. 'em' is unit measurment*/ font-weight: normal; /* Will set the weight to normal making everything unbold */ }
logo { /* Links in the header are centred*/
text-align: center; margin: 0; }
/************************************************************************************ Body ************************************************************************************/
body { background-color: #ffffff; /* site body background set to white / color: #888888; / Text within the body is set to grey */ }
body { font-family: 'Open Sans', sans-serif; /* Setting font to Sans Sera, if google can't suuply this font then it will default to Sans-serif */ }
/************************************************************************************ Navigation ************************************************************************************/
nav { background-color: #599a68; /* nav area background set to green */ }
nav { text-align: center; /* Centers all everything within the nav section*/ padding 10px 0; /* Adds some padding above / margin: 20px 0 0; / Applies margin to the top */ }
/************************************************************************************ Footer ************************************************************************************/
footer { font-size: 0.75em; text-align: center; /* Centers all everything within the footer section*/ clear: both; padding-top: 50px; /* Adds some padding above / color: #cccccc; / Text within the footer is set to light grey */ }
/************************************************************************************ Page Portfolio ************************************************************************************/
gallery {
margin: 0; /* No margin has been set / padding: 0; / No padding has been set / list-style: none; / Removes style on the list so there are no bullet points or numbers */ }
gallery li {
float: left; /* enables elements to wrap to make two columns / width: 45%; / Each element will take up 45% of the width / margin: 2.5%; / applies 2.5% of remaining space on each side / background-color: #f5f5f5; / Background colour is set to white/cream / color: #bdc3c7; / Text colour is set to dark grey */ }
gallery, li a {
margin:0; padding: 5%; font-size: 0.75em; color: #bdc3c7; }
/************************************************************************************ Links ************************************************************************************/
a { color: #888888 /* link color set to grey */ }
nav a, nav a:visited { color: #ffffff; /* a visited link set to white */ }
nav a.selected, nav a:hover { color: #32673f; /* Hovering over a link that is in the 'class selected' turns green */ }
2 Answers
Casey Antoine
Courses Plus Student 5,174 PointsWithin the "How to Make a Website" course, once you get into "Responsive Web Design and Testing" section is where he gets into creating a responsive.css document and sets the break points.
Casey Antoine
Courses Plus Student 5,174 PointsYour HTML isn't linked to any responsive.css document that the course creates.
they break it into two page breaks:
@media screen and (min-width: 480px) {
\**** Code ****/
}
@media screen and (min-width: 660px) {
\**** Code ****/
}
Hope this helps.
Stuart McPherson
15,939 PointsThanks for the your answer. I understand what your saying, and a responsive.css makes sense, but following the videos, Nick only has his index.html, normalize.css and main.css and when he changes the browser size his site responds to the changes so everything fits in. he doesn't have a responsive.css. Unless I'm missing something
Stuart McPherson
15,939 PointsStuart McPherson
15,939 PointsOkay thank you for your help