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

Anita Amini
Anita Amini
6,389 Points

Background colour to show breakpoints doesn't change for me

I have looked at Nick's html and css files and I know that my responsive.css code is correct but my html file is probably where I'm going wrong. I've used http://validator.w3.org/check and it only picked up on one error which I fixed but the background colour still doesn't change.

my html file is a bit different to Nick's because I started it before I joined treehouse but I was wondering if anyone would be kind enough to have a look at my code and see where I've gone wrong. (sorry it's a bit messy, I'm new to this)

Thank you!

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Anita</title> <link rel="stylesheet" href="normalize.css"> <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Ubuntu:300' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="responsive.css">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

</head> <body> <header> <nav> <div class="container"> <nav role="navigation"> <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="Blog.html">Blog</a></li> <li role="presentation"><a href="Photos.html">Photos</a></li> <li role="presentation"><a href="Music.html">Music</a></li> <li role="presentation"><a href="videos.html">Videos</a></li> <li role="presentation"><a href="contact.html">Contact</a></li> <img src="IMG_2539.JPG" alt="Image of Anita" class="img-rounded"/> </ul> </nav> </div> <div class="jumbotron"> <h1>Anita</h1> </div> </nav> </header> <div id="main-text" class="container"> <p>Welcome to my website.</p> <p>blah blah</p> </div> <div class="container"> <footer> <div class="social_media"> <a href="....."><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjPHqGmesOlcRBBcZtoPKDzigz7TbY91wNSexrnPZm7cQ_6icx" class="social-icon" alt="#"></a> <a href="......."><img src="http://www.wintonwebdesign.co.uk/soundcloud.jpg" class="social-icon" alt="#"></a> <a href=".........."><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQPragXXj5-NIlfbdds2zgQFpG5STyNGQV_wgtNM3bOeOdu-diUYg" class="social-icon" alt="#"></a> <a href="........"><img src="http://www.inkhouse.net/wp-content/uploads/2014/07/medium-logo-150x1501.png" class="social-icon" alt="#"></a> <a href="........."><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS4ugAx3aw8kWzMR_KNrimqAUwVUGOBXbBPb_wogYkbKoH__wY8cw" class="social-icon" alt="#"></a> </div> <p>© 2014 Anita</p> </footer> </div> </body> </html>

Anita Amini
Anita Amini
6,389 Points

don't know why it doesn't show the rest but I had the following at the end:

</body>

</html>

7 Answers

Nathan Flateau
Nathan Flateau
7,551 Points

Where are your html and head elements?

Anita Amini
Anita Amini
6,389 Points

At the top I had:

<html> <body>

and at the bottom:

</html>

but not sure why it didn't get copied over or something in here.

Anita Amini
Anita Amini
6,389 Points

it doesn't come out for some reason but I have html and head at the top and closing html at the bottom. Thanks

Nathan Flateau
Nathan Flateau
7,551 Points

Bootstrap may have changed the way the css works. Try commenting out the bootstrap link elements and see if that works.

Anita Amini
Anita Amini
6,389 Points

Hi Nathan, thank you! you were right, it worked! does this mean I can't use bootstrap in this project now for the breakpoints to work??

Nathan Flateau
Nathan Flateau
7,551 Points

If you put the responsive.css link below the bootstrap, it might work. I would go through the non-minified bootstrap file and see what the CSS rules are and tailor the responsive file to work with the framework. Another idea would be remove the bootstrap files from the html and copy/paste the parts you want into your responsive file.

(Please, if you like my responses, hit the upvote arrow. Thanks! :)

Anita Amini
Anita Amini
6,389 Points

great, thanks for the tip :)