Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

I have checked my code against his 100 times now, yet my layout doesn't go to three columns when I increase screen size

The screen is responsive except it doesn't go to three columns

@media screen and (min-width: 480px){ #primary{ width:50%; float:left;

} #secondary{ width:40%; float:right; } #gallery li { width: 28.3333%; }

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

@media screen and (min-width: 660px){

}

6 Answers

Hi mike lyell

The problem was not in your CSS code but in a misspell on your HTML where you link to the stylesheet:

<link rel="stylesheet" href="css/repsonsive.css">

Should be:

<link rel="stylesheet" href="css/responsive.css">

look at the word "RESPONSIVE" very closely, you have the SP reversed.

https://w.trhou.se/wa3iedihwk

thank you very much it works perfectly now!

I know this may sound obvious but did you save your responsive.css file after making changes? I made changes to the file and did not save my changes (you can see an orange dot next to the file if it is not saved) and in fact my changes were not applied.

After saving the code worked as expected.

Here is a sample file with the code you posted to confirm that in fact your code works!

http://port-80-o1merhg9mx.treehouse-app.com

Yeah, It looks right.. Do you know if there is any code in the the main.css file that would override it and not allow 3 columns

No that I know of and I doubt it, your code that I moved over to my sample was only modifying styles.css and not touching main.css at all.

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! If other people are claiming that it works, but it's not working on your end then in all likelihood there's nothing wrong with your code. Chances are, the issue is with your browser. Have you tried clearing the cache and then refreshing the preview? It sounds like it may be loading in an a cached version of your site.

Let me know if this helps! :sparkles:

Yes I did try that as well as a different browser. I don't I will just move on and ignore it for now.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Well let's not give up just yet! :smiley: If you look in the upper right hand side of your workspace you should see a little camera icon. This will allow you to make a snapshot of your workspace. Once you've created go to it and grab the link and post it here. This will allow myself and others to make a copy of your workspace and look around (without changing your copy). I feel confident we can get it sorted out, and it's always best to solve the problem as soon as it's detected! :sparkles:

thank you ahead of time, tried to continue ahead and the next task adjusting about page didn't work either, so I have obviously messed up something along the way