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 Adjust the Profile Page and Header

THOMAS PRETE
THOMAS PRETE
7,009 Points
Posted by THOMAS PRETE
THOMAS PRETE
7,009 Points

Why does my Header increase it's height when I adjust screen size?

After I input this CSS my header height no longer stays static. It increases as I adjust the screen size larger.

@media screen and (min-width: 660px) {

/*****************************
HEADER
*****************************/
    nav {
        background: none;
        float: right;
        font-size: 1.125em;
        margin-right: 5%;
        text-align: right;
        width: 45%;
    }

    #logo {
        float: left;
        margin: 5%;
        text-align: left;
        width: 45%
        height: auto;
    }

    h1 {
        font-size: 4em;
    }

    h2 {
        font-size: 2em;
        margin-bottom: 20px;
    }
}
Hadi Khalili
Hadi Khalili
7,969 Points
Hadi Khalili
Hadi Khalili
7,969 Points

From the code above, it looks like relative unit (em) is the cause of it. Remember the em compounds. if the h2 is on the header the font size increases and increase the height. Use 'rem' and see what happens.

Post the whole code.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

fixed code formatting

1 Answer

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Thomas,

In the video, Nick added the declaration margin-left: 5%; to #logo

You have margin: 5%; which puts a 5% margin all the way around the logo.

% based margins are based off the width of the parent element which is the header in this case.

As you increase the browser width you're increasing the width of the header which in turn increases the size of the margin on the logo.