Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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

lordcozycat
lordcozycat
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

thanks this one worked the best for me.

Kit Navock
Kit Navock
4,540 Points

This works for me. Thanks.

Ivan Dimov
Ivan Dimov
4,690 Points

You just add max-width: 100%;

Scott Moore
Scott Moore
4,050 Points

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

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

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