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

Carl Prude
PLUS
Carl Prude
Courses Plus Student 1,627 Points
Posted by Carl Prude
Carl Prude
Courses Plus Student 1,627 Points

Why isn't responsive.css overriding my main.css? body background tag doesn't affect anything in #wrapper div.

Checked my HTML pages and I definitely have my responsive.css doc linked underneath main.css......when changing body element background to "navy" in responsive.css, only the areas outside of the #wrapper div id are turned navy. Shouldn't my navy command override the wrapper css since the wrapper declarations are in main.css (and thus, before my responsive.css file?) and the #wrapper div is INSIDE of the body tag?

4 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Carl,

Are you saying you had assigned a background-color to #wrapper in main.css? I don't believe that was part of the project.

Anyways, elements can have their own background-color. It's not an inherited property.

So the wrapper div is not going to inherit the background color of the body regardless of where it's at in the css.

Carl Prude
Carl Prude
Courses Plus Student 1,627 Points
Carl Prude
Carl Prude
Courses Plus Student 1,627 Points

thanks that clears it up. And yes, i went back and realized that the BG Color i added to main.css was an additional step i had taken. Once i removed it i was good to go. I didn't know that elements could maintain their individual colors, I assumed it was all inherited based on the parent! Thanks for clearing that up

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're welcome.

Normally, the color property is inherited for most elements. It's the background-color property that doesn't inherit.

It would actually be pretty inconvenient if background-color inherited because then it would be harder to have different parts of your site have a different background-color.

Here's a property reference table for css2: http://www.w3.org/TR/CSS21/propidx.html

It has an inherited column, among other things, which shows you which properties can be inherited.

Chance Smith
Chance Smith
6,525 Points
Chance Smith
Chance Smith
6,525 Points

Look at your inspector in Chrome and see if you have a missing file announcement in your console. Maybe your link path is wrong.

Here is a javascript file error as an example. My file isn't missing but this console area is super helpful.

https://www.dropbox.com/s/6mzkj2m0n3kgtaf/Screenshot%202014-07-19%2010.00.09.png

Did that help?

Carl Prude
PLUS
Carl Prude
Courses Plus Student 1,627 Points
Carl Prude
Carl Prude
Courses Plus Student 1,627 Points

my link path is good. The WEIRDEST thing is that it worked for a second and then it stopped working. ugh...

Carl Prude
PLUS
Carl Prude
Courses Plus Student 1,627 Points
Carl Prude
Carl Prude
Courses Plus Student 1,627 Points

Okay i simply removed the background-color property for the #wrapper from my main css file and i got this thing to work. Problem is i don;t understand why i had to delete it. If the responsive.css loads AFTER my main.css it should over ride it so that's a bit annoying.