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 triallialidc
Courses Plus Student 860 PointsHow can I change the nested order of my .css files in my workspace. Need responsive.css at bottom. Seems pre-fixed.
I keep trying to re-order my files according to how they are nested in the instructor's demo(main>normalize>responsive). But my workspace has them in a fixed order of(normalize>responsive>main).
7 Answers
Mark Burns
1,922 Pointsits not the order they appear in the "File name list" but rather the order of the "<link>" tags in the Html file
<link rel="stylesheet" href="css/normalize.css"><br />
<link rel="stylesheet" href="css/main.css"><br />
<link rel="stylesheet" href="css/responsive.css"><br />
applies them in that order so Normalize goes first, then anything in main overrides things in normalize, followed finally by what ever items in responsive override the entries in main
(the workspace seems to order the files Alphabetically)
lialidc
Courses Plus Student 860 PointsThank you! I wanted to make sure because some changes that I made to the responsive.css according to the video are not propagating at all. I thought perhaps, it is because of the way the files were nested. But now I see, Ive got to dive deeper into the problem.
Mark Burns
1,922 PointsI might be able to help with that if I had a better Idea of what is going wrong for you
lialidc
Courses Plus Student 860 PointsThanks! I appreciate your willingness to help!
Here is my workspace site: http://port-80-oznx4ow7cs.treehouse-app.com/contact.html
Can you view that?
Here is a copy of my responsive.css: /Media queries provide conditions for a website to be responsive/
@media screen and (min-width: 480px) { /Two Column Layout/
#primary { width: 50%; float: left;
} #secondary { width: 40%; float: right;
}
/3 times 5(left and right margins)=15% 100%(of the page)-15%=85% of usable space, then take 85%/3columns= 28.3333333<- do not round off/
/* Responsive CSS Code for Portfolio Page to have the gallery resize based on screen size*/
#gallery li { width: 28.33333333%;
}
#gallery li:nth-child(3n+1) { clear: left;
} }
/about page responsive Layout/ .profile-photo { float: left; margin: 0 5% 80px 0;
}
}
/HEADER responsive CSS Layout/
@media screen and (min-width: 660px) {
nav { background: none; float: right; margin-right: 5%; text-align: right; width: 45%;
}
#logo { float: left; margin-left: 5%; text-align: left; width: 45%;
}
h1 { font-size: 0.825em; margin-bottom: 20px;
}
header { border-bottom: 5px solid #e2e2e2; margin-bottom: 60px;
}
}
Mark Burns
1,922 PointsSo based on the link you sent you have a problem on the Contact page?
several of your comments are created incorrectly and could be part of the issue you must use "/" at the beginning and "/" at the end not just "/"
you may have unmatched "{" "}" as well its difficult to say from what is pasted here. (it seems you have an extra "}" just after #gallery li:nth-child(3n+1) line
this makes the .profile-photo entry outside of the @media { /* two column */ } section
<code> @media screen and (min-width: 480px) { /Two Column Layout/
#primary { width: 50%; float: left; }
#secondary { width: 40%; float: right; }
/* 3 times 5(left and right margins)=15% 100%(of the page)-15%=85% of usable space, then take 85%/3columns= 28.3333333<- do not round off */
/* Responsive CSS Code for Portfolio Page to have the gallery resize based on screen size*/
#gallery li { width: 28.33333333%; }
#gallery li:nth-child(3n+1) { clear: left; }
} < this brace ends the CSS for the "two column Layout" this is probably the mistake and just needs to be removed
/* the next bit is just a regular css entry that is outisde of the @media query
/about page responsive Layout/
.profile-photo { float: left; margin: 0 5% 80px 0; }
}
</code>
lialidc
Courses Plus Student 860 PointsI made the changes and I deleted all comments just in case... it worked!
Ok, so pretty much never use "/*" for comments just "/" as you stated.
lialidc
Courses Plus Student 860 PointsNo particular problem on the contact page. Just the link I chose. However, the icon files included in this workspace never did show up on the page. Should I paste the HTML to you?
You seem like a seasoned developer, and I'm learning now. I feel like syntax error will get the best of me, they mention using a validator to catch errors. Any other tools you know of? I want to become a professional web developer, but I have the tendency to go fast and it gets sloppy.
Mark Burns
1,922 Pointslol sorry got busy last week - ask anything you like if I don't know I'll try to find an answer