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

Michael Bredthauer
Michael Bredthauer
13,429 Points
Posted by Michael Bredthauer
Michael Bredthauer
13,429 Points

How to make my logo resize with the browser page

I am just starting out and I am having some trouble with my header, I have a logo next to my <h1> set to 200px but it doest shrink with the browser page. HTML: <h1><img src="Images/logo.png">Mid12Design</h1> CSS: h1 img { float: left; margin: auto; max-width: 200px; }

Michael Bredthauer
Michael Bredthauer
13,429 Points
Michael Bredthauer
Michael Bredthauer
13,429 Points

thanks for the help, I am able to make the logo shrink with the page, now my h1 doesn't shrink with the page, and when the page shrinks the logo floats above the h1 element which stays too big.

5 Answers

notf0und
notf0und
11,940 Points

I believe you'll need to set the width to a percentage, so it will resize with adjusted window width. Then you can set your max-width to 200px.

Just an example:

header #logo {
    width: 30%;
    max-width: 200px;
}

That will set your max-width to 200px, of course, and your image will not size up further than that. When resizing your window, if 30% of the container, whether it be a header or the body itself, is less than 200px, your image will size down.

Hope I'm right about this, and I hope it helps.

Michael Bredthauer
Michael Bredthauer
13,429 Points
Michael Bredthauer
Michael Bredthauer
13,429 Points

thanks this one worked the best for me.

Kit Navock
Kit Navock
4,540 Points
Kit Navock
Kit Navock
4,540 Points

This works for me. Thanks.

Ivan Dimov
Ivan Dimov
4,690 Points
Ivan Dimov
Ivan Dimov
4,690 Points

You just add max-width: 100%;

Scott Moore
Scott Moore
4,050 Points
Scott Moore
Scott Moore
4,050 Points

Correct in your css add img {max - width:100%}

Michael Bredthauer
Michael Bredthauer
13,429 Points
Michael Bredthauer
Michael Bredthauer
13,429 Points

Thanks for the help, I am able to make the logo shrink with the page, now I am having trouble with the h1 sizing, the logo shrinks with the page but the h1 doesn't.

Scott Moore
Scott Moore
4,050 Points
Scott Moore
Scott Moore
4,050 Points

Michael, http://codepen.io/anon/pen/LDart Hopefully this will help you understand a little