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
Anita Amini
6,389 PointsBackground 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>
7 Answers
Nathan Flateau
7,551 PointsWhere are your html and head elements?
Anita Amini
6,389 PointsAt 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
6,389 Pointsit 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
7,551 PointsBootstrap may have changed the way the css works. Try commenting out the bootstrap link elements and see if that works.
Anita Amini
6,389 PointsHi 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
7,551 PointsIf 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
6,389 Pointsgreat, thanks for the tip :)
Anita Amini
6,389 PointsAnita Amini
6,389 Pointsdon't know why it doesn't show the rest but I had the following at the end:
</body></html>