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

CSS How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

How 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

its 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)

Thank 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.

I might be able to help with that if I had a better Idea of what is going wrong for you

Thanks! 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;

}

}

So 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>

I 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.

No 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.

lol sorry got busy last week - ask anything you like if I don't know I'll try to find an answer