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

CSS

Posted by david bowen
david bowen
Courses Plus Student 1,707 Points

I uploaded my proejct files but none of my formatting seems to be working?

I tried viewing my website on my smart phone and the contents show up however it's not showing any of the formatting i used in the css files.

Jeff Busch
Jeff Busch
19,287 Points

Need to see some code.

3 Answers

david bowen
PLUS
david bowen
Courses Plus Student 1,707 Points
david bowen
david bowen
Courses Plus Student 1,707 Points

Hi Jeff,

Not Sure what code you would like to see but here's the code in my <head> tags which references my css stylesheets:

<head>

<meta charset="utf-8">

<title>Dave Bowen | Personal Home Page</title>

<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="shortcut icon" type="image/x-icon" href="img/favicon2.ico">
<meta name="viewport" content="width=device-with, intitial-scale=1.0">

</head>
Jeff Busch
Jeff Busch
19,287 Points

The code that formats the web pages for a phone? Maybe the responsive.css? Are there any media queries in main.css?

david bowen
PLUS
david bowen
Courses Plus Student 1,707 Points
david bowen
david bowen
Courses Plus Student 1,707 Points

That would be the 'main.css' file. My responsive is designed to format the page for browsers larger than a phone...code is below: 

/*******************************************
GENERAL 
********************************************/
html, body {
  font-family: 'Oxygen', sans-serif;
  height: 100%;
}

#detail {
 min-height: 100%; 
}

#padding {
 height: 60px; 
}

img {
  max-width: 100%; 
}

a {
 text-decoration: none; 
}

/*******************************************
HEADING
********************************************/       
header {
  height: 60px;
  margin-bottom: 50px;
  padding: 5px 0 0 0;
  max-width: 100%;
  -moz-box-shadow:inset 0px 0px 0px 0px #CCCCCC;
  -webkit-box-shadow:inset 0px 0px 0px 0px #CCCCCC;
  box-shadow:inset 0px 0px 0px 0px #CCCCCC;
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #CCCCCC),   color-stop(1, #4C4C4C) );
  background:-moz-linear-gradient( center top, #CCCCCC 5%, #4C4C4C 100% );
  border: 2px solid white;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-color: #4C4C4C;
}

#name {
  color: white;
  text-align: center;
  margin-top: 15px;
  font-style: normal;
  font-size: 2.55em; 
} 

.social-icon {
 width: 20px;
 height:20px;
 margin: 0 5px;
}

/*******************************************
NAVIGATION
********************************************/   
nav {
  -moz-box-shadow:inset 0px 0px 0px 0px #f6d499;
  -webkit-box-shadow:inset 0px 0px 0px 0px #f6d499;
  box-shadow:inset 0px 0px 0px 0px #f6d499;
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.15, #f1ba5c), color-stop(1, #ff9900) );
  background:-moz-linear-gradient( center top, #f1ba5c 5%, #f6b33d 100% );
  border-radius: 5px;
  margin-top: -25px;
  max-width: 100%;
  text-align: center
}


nav a {
  padding: 15px 10px;
  color: white;
}

nav a:hover {
  color: #0066CC;
}

nav a.selected {
  font-weight: bold;
  color: #0066CC;
}

nav li {
  display: inline-block;
  color: #4C4C4C; 
}

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

/*******************************************
PAGE: HOME
********************************************/

#profile-photo {
  -webkit-animation: myfirst 1s;  /*Chrome, Safari, Opera */
  animation: myfirst 1s;
  max-width: 125px;
  float: left;
  margin: 5px 20px 10px 0;
  border-radius: 20%;
}

@-webkit-keyframes myfirst {
  from {opacity: 0.1;}
  to {opacity: 1.5;}
} 

#wrapper {
 /*-moz-box-shadow:inset 0px 0px 0px 0px #CCCCCC;
 -webkit-box-shadow:inset 0px 0px 0px 0px #CCCCCC;
 box-shadow:inset 0px 0px 0px 0px #CCCCCC;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.01, #999999),   color-stop(1, #4C4C4C) );
 background:-moz-linear-gradient( center top, #CCCCCC 5%, #4C4C4C 100% );
 border: 2px solid #eda933;
 border-radius: 5px;
 background-color: #4C4C4C;
 box-shadow: 5px 5px 15px 0 #eda933;*/
 margin-left: 20px;
 margin-top: -15px;
 font-size: .8em; 
 /*background: gray;*/
}


/*.home-subhead {
 margin:  20px 20px;
 text-align: center;
 background: #E6E6E6;
 border: 1px solid #CCCCCC;
 border-radius: 5px;
 width: 100px;
 height: 20px;
}*/


#about-detail {
 margin-bottom: 20px; 
}

#keywords {
  color: #0066CC;
}



/*******************************************
PAGE: PROFESSIONAL
********************************************/

#prof-summary {
  width: 88%;
  margin: -10px auto 20px;
  padding: 5%;
  border: 2px solid #eda933;
  box-shadow: 5px 5px 5px 5px #4C4C4C;
  }

#prof-summary h3 {
  color: #0066CC;
}

#prof-summary ul li {
 font-size: .9em; 
}

#resume {
  -moz-box-shadow:inset 0px 0px 0px 0px #fed897;
  -webkit-box-shadow:inset 0px 0px 0px 0px #fed897;
  box-shadow:inset 0px 0px 0px 0px #fed897;
  background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f6b33d),   color-stop(1, #d29105) );
  background:-moz-linear-gradient( center top, #f6b33d 5%, #d29105 100% );
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6b33d',               endColorstr='#d29105');
  background-color:#f6b33d;
  -webkit-border-top-left-radius:12px;
  -moz-border-radius-topleft:12px;
  border-top-left-radius:12px;
  -webkit-border-top-right-radius:12px;
  -moz-border-radius-topright:12px;
  border-top-right-radius:12px;
  -webkit-border-bottom-right-radius:12px;
  -moz-border-radius-bottomright:12px;
  border-bottom-right-radius:12px;
  -webkit-border-bottom-left-radius:12px;
  -moz-border-radius-bottomleft:12px;
  border-bottom-left-radius:12px;
  text-indent:-3px;
  display:inline-block;
  color:#ffffff;
  font-size: .8em;
  font-weight:bold;
  font-style:normal;
  height:30px;
  line-height:30px;
  width:141px;
  text-decoration:none;
  text-align:center;
  text-shadow:0 5px 5px #806435;
}

#resume:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d29105), color-stop(1, #f6b33d) );
    background:-moz-linear-gradient( center top, #d29105 5%, #f6b33d 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d29105', endColorstr='#f6b33d');
    background-color:#d29105;
}

#resume:active {
    position:relative;
    top:1px;
}

#adobe {
  height: 20px;
  width: 15px;
}

ul {
  list-style-type: square;
}

#strengths {
  list-style-type:decimal;
}

.work-gallery {
  margin-left: -10px;
  padding: 0;
}

.work-gallery li {
  display: inline-block;
  height: 80px;
  max-width: 100px;
  padding: 2.5%;
  text-align: center;
}

.work-gallery li a:visited {
  color: black;
}





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


#primary {
 margin: 0 10px 0 25px; 
}

#secondary {
 margin: 0 10px 0 25px; 
}

#primary h3 {
  color: #0066CC;     
}

#secondary h3 {
  color: #0066CC;     
}


.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  text-decoration: none;
  color: rgb(55,100,150);
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}

.contact-info li.facebook a {
  background-image: url('../img/facebook.png');
}

.contact-info li.linkedin a {
  background-image: url('../img/linkedin-logo_2.png');
}

/*******************************************
FOOTER
********************************************/
footer {

  height: 60px;
  max-width: 100%;
  margin-top: -60px;
  -moz-box-shadow:inset 0px 0px 0px 0px #CCCCCC;
  -webkit-box-shadow:inset 0px 0px 0px 0px #CCCCCC;
  box-shadow:inset 0px 0px 0px 0px #CCCCCC;
  background:-webkit-gradient( linear, left bottom, left top, color-stop(1.00, #CCCCCC),   color-stop(.05, #4C4C4C) );
  background:-moz-linear-gradient( center bottom, #CCCCCC 5%, #4C4C4C 100% );
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  background-color: #4C4C4C;
  clear: both;
}

footer p {
 padding-top: 20px;
 text-align: center;
 font-size: .9em;
 color: white;
}
Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

One thing I noticed is that in the HTML of your head section that you included there were a couple of typos:

<meta name="viewport" content="width=device-with, intitial-scale=1.0">

Should be:

<meta name="viewport" content="width=device-width, initial-scale=1">