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 Adding Pages to a Website Add a New Page

Same code, same header... different header sizes in different pages???

Well I was coding the designer website when I suddenly realized that when I click in Portfolio and About or Contact the Portfolio header is a little bigger than the about or contact header which are pretty much the same size... also the nav words in portfolio are a little bigger! whats happening? I double checked my whole code with the one from the treehousewebsite.com and everything seems to be ok... also when I check my code with Chrome Developer tool I get this weird "font-size: 16.3636360168457px;" for my contact link in prtfolio page,.... how can I upload an img so you can see exacxtly what i mean?=??

http://s30.postimg.org/si9z0989t/problem.jpg

alt text

/*************************************
GENERAL
**************************************/

body {
    font-family: 'Open Sans', sans-serif;
}

#wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;

}

h3 {
    margin: 0 0 1em 0;
}



/*************************************
HEADING
**************************************/
header {
    float: left;
    margin: 0 0 30px 0; /*margen para abajo*/
    padding: 5px 0 0 0; /*pequeño margen de arriba*/
    width: 100%; /*se pone esta para que salga completo el header*/

}


#logo {
    text-align: center;
    margin: 0;
}

h1{
    font-family: 'Changa One', sans-serif;
    margin: 15px 0;
    font-size: 1.75em;
    font-weight: normal;
    line-height: 0.8em;
}

h2 {
    font-size: 0.75em;
    margin: -5px 0 0;
    font-weight: normal;
}




/************************************
NAVIGATION
*************************************/

nav {
    text-align: center;
    padding: 10px 0;
    margin: 20px 0 0;
}

nav ul {
    list-style: none;
    margin: 0 10px;
    padding: 0;
}

nav li{
    display: inline-block; /*pone las opciones para navegar en linea*/
}

nav a {
    font-weight: 800; /*hace las letras negritas y rellenas*/
    padding: 15px 10px; /*CENTRA el texto sin sacarlo de margen*/
}

/************************************
FOOTER
*************************************/

footer {
    font-size: 0.75em;
    text-align: center;
    clear: both; /* se acomodan los logos*/
    padding-top: 50px;
    color: #ccc;
}
/* El codigo en social-icon sirve para hacer los iconos mas pequeños*/
.social-icon {
    width: 20px;
    height: 20px;
    margin: 0 5px;
}


/*************************************
PAGE: PORTFOLIO
**************************************/

#gallery {
    margin: 0;
    padding: 0;
    list-style: none; /*bullet points off*/
}
/* Con esto se hacen dos columnas*/
#gallery li{
    float: left;
    width: 45%;
    margin: 2.5%;   
    background-color: #f5f5f5;
    color: #bdc3c7;
}

#gallery li a p{
    margin: 0;
    padding: 5%;
    font-size: 0..75em;
    color: #bdc3c7;
}

#gallery li a p:hover{
    color: #599A68;
}



/************************************
PAGE: ABOUT
*************************************/

.profile-photo {
    display: block;
    max-width: 150px;
    margin: 0 auto 30px;
    border-radius: 100%

}



/************************************
PAGE: CONTACT
*************************************/







/*************************************
COLORS
**************************************/

/* Site Body */
body {
    background-color: #fff;
    color: #999;
}

/*green header*/
header {
    background: #6AB47B;
    border-color: #599A68;
}

/*nav background on mobile*/
nav {
    background: #599A68;
}

/*logo text*/
h1, h2 {
    color: #fff;
}

/*links*/
a {
    color: #6AB47B;
}

/*nav link*/
nav a, nav a:visited {
    color: #fff;
}

/*selected nav link*/
nav a.selected, nav a:hover {
    color: #32673F;
}

3 Answers

OK... I solved it.... it happens that my zoom was activated at 110% in the index page... xD

First thing that I can think of is that perhaps because the main-page is vertically longer than your second page, it naturally adds a scroll-bar to the right of the window. This scroll-bar reduces the view-port size of the page and might be the cause of the header behaving like it does.

Try adding on your second page any kind of content (text, pictures, whatever..) until the page is so long you get a scroll-bar. Does the header change then?

I also thought about the window size but it's not that, I haven't even put any kind of repsonsive code yet.

I decided to put some images as you suggested and still the same thing... weird huh?

http://s10.postimg.org/9m29j8kl5/Sin_t_tulo.jpg

alt text

Are you linking /main.css to the contact page as well as the portfolio page?