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
Toby DeGrandpre
1,530 PointsHow to Make a Website > Adjust the Profile Page & Header
I cannot figure out how to add my code via "markup cheatsheet". I am at the point of adjusting the header on the About page in How to Make a Website. As soon as I start adjusting the 660px breakpoint to align the logo text left, the whole navigation header aligns left into a column column and the profile-photo and Info align on the same line, right. I cannot find any missing curly brackets. Can someone help? Here is the page's code...I am sorry it isn't aligned correctly.
@media screen and (min-width: 480px) {
/***************************
GENERAL
***************************/
#primary {
width: 50%;
float: left;
}
#secondary {
width: 40%;
float: right;
}
/***************************
Figuring Notes: 4 columns * 5 margin = 20
100% remainder for images - 20 margins = 80%
80/4 = 20
***************************/
/***************************
PAGE: PORTFOLIO, 4 COLUMNS
***************************/
#gallery li {
width: 20%
}
#gallery li:nth-child(3n + 1) {
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-left: 5%;
text-align: left;
width: 45%;
}
h1 {
font-size:
}
}
6 Answers
Toby DeGrandpre
1,530 PointsTreehouse instructor Guil Hernandez looked at the code and identified my error:
It looks like you gave your <header> tags an id of "logo". The id="logo" attribute needs to be in the header's <a> tag instead -- the one containing your name and role.
This fixed my navigation issue! Thank you!
Jonathan Grieve
Treehouse Moderator 91,253 PointsThe link to the markdown cheatsheet is below the textbox for adding new posts and will open a modal window with everything you need to know to display your code using markdown.
I added some markdown to your code on this occasion :)
One thing I noticed in your code is your final H1 style rule doesn't have a font size value.
The Syntactically your media queries are correct. I wonder if you're using the right queries for your media queries, i.e. maybe you need to target maximum widths instead of minimum widths?
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 660px) {
}
Toby DeGrandpre
1,530 Pointshttp://cmccontentmarketing.com/code-image/
I've posted an image here of the issues I am having. The code for the breakpoints is the same that is used in the instruction video. What would be helpful is if the correct code was posted for students to compare their code against and troubleshoot the problems.
Jonathan Grieve
Treehouse Moderator 91,253 PointsAfter a closer look,
in your 480 breakpoint, your list items inside the div with the id of gallery doesn't have a semi colon which can confuse the browser. Try fixing that and see what happens. :-)
/***************************
PAGE: PORTFOLIO, 4 COLUMNS
***************************/
#gallery li {
width: 20%;
}
#gallery li:nth-child(3n + 1) {
clear: left;
}
Toby DeGrandpre
1,530 PointsThank you for catching that one; unfortunately, it didn't help. I think I am just going to start the Responsive sheet from scratch and see if I can make it work. Thank you!
Toby DeGrandpre
1,530 PointsI started the Responsive.css file from the beginning, following every code accurately to the "T". I left the color codes so that I could easily identify where the possible problem is. As soon as I add the code below, it breaks here:
html and css
#logo {
float: left;
margin-left: 5%;
text-align: left;
width: 45%;
I cannot move forward without resolving this. Also, the pseudo-class (initially used and the correction, does not resolve pushing the third photo in proper alignment. I am using Chrome for the browser.
html and css
/**************************
PAGE: PORTFOLIO
***************************/
#gallery li {
width; 28.3333;
}
#gallery li:nth-child(3n + 1) {
clear: left;
}
Hopefully, the addition of the "backticks" sets this code correctly for displaying. Here is the updated link to view the images: http://cmccontentmarketing.com/code-image/
Jay Padzensky
4,731 Points #gallery li {
width; 28.3333;
}
Looks like your width declaration has a ";" instead of ":"
Toby DeGrandpre
1,530 PointsThank you for the catch Jay. Unfortunately, that didn't fix the problem.
Toby DeGrandpre
1,530 PointsMy latest responsive.css file:
@media screen and (min-width: 480px) {
body {
background: navy;
}
/**************************
TWO COLUMN LAYOUT
***************************/
#primary {
width: 50%;
float: left;
}
#secondary {
width: 40%;
float: right;
}
/**************************
PAGE: PORTFOLIO
***************************/
#gallery li {
width: 28.3333;
}
#gallery li:nth-child(3n + 1) {
clear: left;
}
/**************************
PAGE: ABOUT
***************************/
.profile-photo {
float: left;
margin: 0 5% 80px 0;
}
}
/**************************
SECOND MEDIA QUERY BREAKPOINT
***************************/
@media screen and (min-width: 660px) {
body {
background: darkgreen;
}
/**************************
HEADER
***************************/
nav {
background: none;
float: right;
font-size: 1.125em;
margin-right: 5%;
text-align: right;
width: 45%;
}
#logo {
float: left;
margin-left: 5%;
text-align: left;
width: 45%;
}
}```
Siddhant Mehta
Courses Plus Student 478 PointsSiddhant Mehta
Courses Plus Student 478 Pointscan u please paste link of your workspace snapshot