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

HTML How to Make a Website Responsive Web Design and Testing Adding Breakpoints for Devices

I am following the exact steps of Nick Pettit, but there are certain changes that's not being done

for example i added media queries.. but when i preview my page there is no change in background color eventhough i am resizing my web browser

4 Answers

It happened to me very often. I've no idea why, but whenever i downloaded Nick's files from downloads it started working all of a sudden. Particularly in my case, i was just trying to do things a bit differently from Nick which to me shouldn't create any problems but it did. Check the IDs and classes names you might be writing things differently. But let's hope Mods have better things to tell about this.

First, it is a bad practice to regularly use !important. You are not properly utilizing CSS is you have to do that. Also, I have done this and many other Treehouse courses and I don't recall ever using !important.

The first step is to clear the cache on your browser. If that does not work, there is an error in your code. Posting your code will help us find the issues. There are two ways to post code. One is to copy and paste the code here. If you do that, please read the Markdown Cheatsheet on how to format it. The other way is to create a snapshot of your workspace. You do that by clicking the camera icon in the upper right side of the Workspace window. Then follow the steps until you can copy the snapshot URL. Paste that here and we will be able to see your entire project. We can also create a fork and make alterations and post a snapshot back.

Hi Ted! Here's the snapshot of my workspace.

https://w.trhou.se/wpc1tl6lv8

amadeo brands
amadeo brands
15,375 Points

Try to add this: !important;

The primary problem is that you have not linked your responsive.css file properly. Look very carefully at your html and see if you can see the problem. I looked for it at first and didn't see it. I then opened the developer console in Chrome and it showed an error that allowed the issue to jump off the screen at me.

Once you have it linked, you will have an display issue. Look at this for the issue, answer, and why it does what it does.

Thank u Ted!!!! :) I corrected the mistake u pointed out.. :)

Thank u Ted!!!! :) I corrected the mistake u pointed out.. :)