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 trialAdolf Roman
3,758 PointsSame 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
/*************************************
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
Adolf Roman
3,758 PointsOK... I solved it.... it happens that my zoom was activated at 110% in the index page... xD
Christian Andersson
8,712 PointsFirst 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?
Adolf Roman
3,758 PointsI 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?
Alan Dubinsky
1,286 PointsAre you linking /main.css to the contact page as well as the portfolio page?