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
E F
1,968 PointsBuild Three Column Layout May Have Broken Navigation Display
After following along with the video, I noticed that my navigation buttons (Portfolio, About, Contact) do not play with with a screen adjustment. Somewhere between a resolution of 480 and 660, I see Portfolio and About sitting ON TOP of Contact. Here is the code for both the css file and html files.
CSS:
@media screen and (min-width: 480px) {
/**********************************
TWO COLUMN LAYOUT
***********************************/
#primary {
width: 50%;
float: left;
}
#secondary {
width: 40%;
float: right;
}
/**********************************
PAGE: PORTFOLIO
***********************************/
#gallery li {
width: 28.3333%;
}
#gallery li:nth-child(4n) {
clear: left;
}
/**********************************
PAGE: ABOUT
***********************************/
.profile-photo {
float: left;
margin: 0 5% 80px 0;
}
}
@media screen and (min-width: 660px) {
/**********************************
HEADER
***********************************/
nav {
background: none;
float: right;
font-size: 1.125em;
margin-right: 5%;
text-align: right;
width: 45%;
}
#logo {
float: left;
margin: 5%;
text-align: left;
width: 45%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 0.825em;
margin-bottom: 20px;
}
header {
border-bottom: 5px solid #599a68;
margin-bottom: 60px;
}
}
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nick Pettit | 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">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Nick Pettit</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 color 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 repetition.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2014 Nick Pettit.</p>
</footer>
</div>
</body>
</html>
Thanks in advance! (I can't believe I have to ask two questions in one day...)
2 Answers
E F
1,968 PointsThanks again, Shawn. I'll update the organic database.
Shawn Denham
Python Development Techdegree Student 17,801 PointsLooking good E F :)
I am at work atm so I don't have time to look a the problem. If it's still not answered when I get home I'll take a look.
Dave McFarland
Treehouse TeacherE F did you build this using Treehouse Workspaces? If you did you can take a snapshot of the workspace and share it in this discussion. It will let us fork and test your entire project. You can learn more about creating workspace snapshots in the Preview and Snapshots video.
There's not enough CSS here in your listing for me to test this. I need the main.css stylesheet too.
Nick Pettit
Treehouse TeacherPosting the Workspace will definitely help!
E F : In the screenshot you emailed to Treehouse Support, it looked to me like the browser zoom might not be set to 100% or the browser's minimum text size is different than the default. Either that or there's an issue with font sizing in the CSS. You should still post the Workspace, but you may also want to try resetting the browser zoom level to 100% and resetting the font size. I see you're using Firefox, so here's Mozilla's support article on how to do both of those things: https://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages
Shawn Denham
Python Development Techdegree Student 17,801 PointsDave McFarland look at you helping outside of JavaScript! ;)
Shawn Denham
Python Development Techdegree Student 17,801 PointsShawn Denham
Python Development Techdegree Student 17,801 PointsHey again E F
to paste your code is 3 backticks (the key to the left of the 1 key)
you use quotation marks to close your css. And also you are going to want to put your 3 backticks then the language on the same line. Then hit enter twice and paste your code then hit enter twice again and put your 3 closing backticks.
```css
#body { color: black; }
```