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

Posted by Adolf Roman
Adolf Roman
3,758 Points

Same header, same code, two different sizes!!!???

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?=??

4 Answers

Adolf Roman
Adolf Roman
3,758 Points

THE ISSUE

issue

Jeremy Hayden
Jeremy Hayden
1,740 Points
Jeremy Hayden
Jeremy Hayden
1,740 Points

Maybe your css file got changed?

Adolf Roman
Adolf Roman
3,758 Points

Been looking all over lots of code in the developer tools and I cannot find anything at all!! evrytging seems to be fine, i compared all the code and absolutely nothing! :S

Adolf Roman
Adolf Roman
3,758 Points
Adolf Roman
Adolf Roman
3,758 Points

Code 

/*************************************
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;
}
Roberto Alicata
PLUS
Roberto Alicata
Courses Plus Student 39,959 Points
Roberto Alicata
Roberto Alicata
Courses Plus Student 39,959 Points

Did you use a reset css file?