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!
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
Anton Bozhkov
5,730 PointsFit image in container not working
Hello, this is my code which I included bootstrap and I am trying to change the image of my logo in style.css using #logo img {height:100%} however when I inspect the element the height is auto which probably means something overwrites it but I cannot seem to get where the problem is, here is my head and part of the code where I have included the logo img, I have put style.css at the end of the head so it should be working.
So this is the head
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css"> <title>DSM Services Ltd</title> </head>
and this is my header nav
<header class="container"> <div class="navbar navbar-default navbar-fixedtop" role="navigation"> <div class="navbarheader"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html"> <img alt="Logo" src="img/logoedit3.png" class="img-responsive"> </a> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="index.html" class="active"> Home </a></li> <li><a href="about.html">About</a></li> <li class="dropdown"><a href="services.html" class="dropdown-toggle" data-toggle="dropdown">Services</a> <ul class="dropdown-menu"> <li><a href="Destruction">Destruction</a></li> <li><a href="Demolition">Demolition</a></li> </ul> </li> <li><a href="safety.html">Safety</a></li> <li><a href="employers.html">Employers</a></li> <li><a href="employees.html">Employees</a></li> <li><a href="contact.html">Contact us</a></li> </ul> </div> </div> </div> </header>
I suppose navbrand height property is auto but it should change when i include #logo img {height:100%} in style.css document right?
Its probably something obvious but I cannot see it.
Thank you
2 Answers
Ken Howard
Treehouse Guest TeacherYou didn't provide your CSS file but based on your notes you are targeting the logo with #logo img but you haven't set an id of "logo" anywhere in the document.
I suggest you target .navbar-brand img instead.
Anton Bozhkov
5,730 Pointsthank you, that is it. I did earlier but then i removed the id and forgot i did that.