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 Build a Three Column Layout

The contact page and portfolio page are not changing based on the new coding.

This is my coding

@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; }

}

8 Answers

Robert Manolis
STAFF
Robert Manolis
Treehouse Guest Teacher

Make sure that in the head of your html the link to normalize.css comes before the one for main.css or style.css.

Make sure your 'id's are the same in your html and your css.

Let me know if that helps.

I had href="responsive.css"> instead of href="css/responsive.css">. Correcting this on all three html pages corrected only the Contact page.

On the index.html page I have

<section> <ul id="gallery"> <li>

which goes with this on the responsive.css page:

gallery li { width: 28.3333%; }

gallery li:nth-child(4n) { clear: left; }

contact.html

<section id="primary">

<section id="secondary">

which seem to match the coding on my responsive.css page:

#primary { width: 50%; float: left; }

#secondary { width: 40%; float: right; }

Is this what you mean by everything matching?

Thank you for the help by the way.

Robert Manolis
Robert Manolis
Treehouse Guest Teacher

I just meant that the file names have have to be the same everywhere. You can't call the home page index.html in one location and then call home.html in another.

is your problem fixed?

Robert Manolis
STAFF
Robert Manolis
Treehouse Guest Teacher

the name of a page has to remain consistent throughout all of your files, or if you want a different name for the same page, you can just make a duplicate.

If my answers have helped you, feel free to mark them as best answers if you like :)

No, only the contact page. I only have index.html, about.html, and contact.html as my file names.

Robert Manolis
STAFF
Robert Manolis
Treehouse Guest Teacher

try changing the order of the links in your html head. Not sure if responsive.css (i.e. media querries) should go before or after the main.css. I think it should go afterwards, the order can definitely effect how the code runs.

If that doesn't help, then start checking your code for for mispellings or syntax errors. if you post the code, I'd be happy to help you look.

Responsize.css comes after the main.css, but I had the main.css line a second time further down the page. Once I deleted that line, everything worked correctly.

Robert Manolis
STAFF
Robert Manolis
Treehouse Guest Teacher

awesome. feels good doesn't it? I love that feeling of finally solving the problem. Sometimes I'll be up till three in the morning just chasing down an answer to why something won't work. And when all the pieces finally come together, it's great, it's like the completion of some awesome crescendo.

Yes it does, I knew the css was right, just somehow got the extra line in the html