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 Debugging HTML and CSS Problems Continue Learning

Dave Lawlor
Dave Lawlor
2,732 Points
Posted by Dave Lawlor
Dave Lawlor
2,732 Points

I don't understand why the headers bottom border code is written inside responsive.css instead of the main.css file.

I thought that the responsive.css file's purpose was to contain media queries, the code contained in the file would modify and override code in the main.css file to take account of differing screen sizes.

In this case the bottom-border value is declared only in the responsive.css file (I can't find a bottom-border entry in main.css) , is that what usually happens?

Thanks.

1 Answer

jacobproffer
jacobproffer
24,604 Points
jacobproffer
jacobproffer
24,604 Points

Hey Dave,

The website created within the How to Make a Website course takes on a mobile first approach. This means that before any media queries are added, the site will take on the appearance of what it would look like on a mobile device. If you comment out the responsive stylesheet, you should see this take place. Notice how the bottom border isn't there?

The media queries are then added to style the website for larger viewports, such as a common desktop or laptop browser width.

The bottom-border value is only added within the responsive stylesheet because for this specific project, we did not want the bottom-border to appear on devices smaller than 660px.

Best,

Jacob