How can I change the nested order of my .css files in my workspace. Need responsive.css at bottom. Seems pre-fixed.

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.

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