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 Adding Breakpoints for Devices

Suraj Shah
Suraj Shah
4,326 Points
Posted by Suraj Shah
Suraj Shah
4,326 Points

Which video talks about when we created the normalize.css file??

When I am running my program with all the files (including all 3 css files taught so far) on workspaces and try to view what I have done, my css is not correctly loading and its just showing me the raw HTML.

I have narrowed down that the issue must be cause in my "normalize.css" file as I have a red box around some lines of code in it.

I was wondering which video I could refer back to and see what I have done incorrectly. This would help greatly. If someone could help me pinpoint the problem, here it is.

The first issue is in this block of code:
audio, canvas, video { *display: inline-block; *display: inline; *zoom: 1; }

/**

  • Prevent modern browsers from displaying audio without controls.
  • Remove excess height in iOS 5 devices. */

I am getting a red box around the word zoom?

The next two problems happen here: html { font-size: 100%; /* 1 / -webkit-text-size-adjust: 100%; / 2 / -ms-text-size-adjust: 100%; / 2 */ }

/**

  • Address font-family inconsistency between textarea and other form
  • elements. */

I am getting an error, red box around the words "text-size-adjust" in both of the lines that include them.

This is all from the normalize.css file. Any help would be greatly appreciated. Thank You.

lancelittlefield
lancelittlefield
12,261 Points
lancelittlefield
lancelittlefield
12,261 Points

Was the code working correctly before this challenge?

Also, did you copy and paste the normalize.css file exactly as it is from the normalize.css website? I would try copying and pasting directly over the one you currently have just in case you modified some of the code by accident.

2 Answers

thomascawthorn
thomascawthorn
22,986 Points
thomascawthorn
thomascawthorn
22,986 Points

Check out this series specifically the first badge "which css reset should I use". It goes into customizing the reset and why you should use it etc...

my css is not correctly loading and its just showing me the raw HTML.

It sounds more like you haven't linked to your css properly. if you right click the page and 'view source', check you can see the correct stylesheet includes in your header. If you can see the links, try clicking on one of the file paths - they should be highlighted blue and clickable. Can you see a 'not found' error, or your css?

if you can't see your css inside this file, I imagine the problem is you're not looking in the right place for you css.

re your errors - As James Alker mentioned, your editor might not be aware of the most recent css declarations and is therefore showing them as a syntax error. You can just ignore this if you copied and pasted the files directly.

James Alker
James Alker
8,554 Points
James Alker
James Alker
8,554 Points

Normalize.css is an open source CSS file that is available to be used by anyone so there is no course that you do on Treehouse that covers creating this file. It's just always referenced in any projects using HTML and CSS.

In terms of the 'incorrect css', as long as you haven't altered these files as supplied then I wouldn't worry about them. Some of the terms used aren't always recognised by some code editors but are needed to 'normalize' all browsers to behaviour as similarly as possible.