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
MICHAEL P
5,191 PointsProblem with my main.css file. Not working the same way that the video is supposed to:
Hello, My main.css file does not work properly. I need help fixing it, but I am not sure what I did wrong.
I am hoping that someone out there can help me.
main.css
/************** GENERAL ****************/
body{ font-family: 'Open Sans', sans-serif; }
a { text-decoration: none; }
img { max-width: 100%; }
wrapper {
max-width: 940px; margin: 0 auto; padding: 0 5%; }
h3 { margin: 0 0 1em 0; }
/************** HEADING ****************/
header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
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; }
nav a { font-weight: 800; padding: 15px 10px ; }
/************** FOOTER ****************/
footer { font-size: 0.75em; text-align: center; clear: both; padding-top : 50px; color: #ccc; }
.social-icon { width: 20px; height: 20px; margin: 0 5px; }
/************** PAGE: PORTFOLIO ****************/
gallery{
margin: 0; padding: 0; list-style: none; }
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; }
/************** PAGE: ABOUT ****************/
.profile-photo { clear: both; display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
/************** PAGE: CONTACT ****************/
.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }
.contact-info a { display: block; 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.twitter a { background-image: url('../img/twitter.png'); }
/************** COLORS ****************/
/* site body */ body { background-color: #fff; color: #999; }
/* green header */ header { background : #6ab47b; border-color: #599a68; }
/* nav background on mobile devices */ nav { background: #599a68; }
/* logo text */ h1, h2 { color: #fff; }
/* links */ a { color: #6ab47b; }
/* nav link */ nav a, nav a: visited0 { color: #000; }
/* selected nav link */ nav a.selected, nav a:hover { color: #32673f; }
responsive.css
@media screen and (min-width: 480px) {
/************** TWO COLUMN LAYOUT ****************/
#primary { width: 50%; float: left; }
#secondary { width: 40%; float: right; }
/************** PAGE: PORTFOLIO ****************/
gallery li {
width: 28.3333%; }
gallery li:nth-child(4n) {
clear: left; }
/************** PAGE: ABOUT ****************/
.profile-photo { float: left; margin: 0 5% 80px 0; }
@media screen and (min-width: 660px) {
/************** HEADER ****************/
nav { background: none; float: right; font-size: 1.125em; margin-right: 5%; text-align: right; width: 45%; }
}
contact.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Michael Puodziukas | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400i,700,700i,800" rel="stylesheet"> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css">
</head> <body> <header> <a href="index.html" id="logo"> <h1>Michael Puodziukas</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html" >About</a></li> <li><a href="contact.html" class="selected">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section id="primary"> <h3>General Information</h3> <p>Looking for new work. Please do not hesitate to contact me!</p> <p>Email is the best way to reach me.</p> </section> <section id="secondary"> <h3>Contact Details</h3 <ul class="contact-info"> <li class="phone"><a href="tel:123-4567">123-4567</a></li> <li class="mail"><a href="mailto:mike@example.com">mike@example.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=puodziukasm">@puodziukasm</a></li> </ul> </section> <footer> <a href ="http://twitter.com/puodziukasm"> <img src="img/twitter-wrap.png" alt= "Twitter logo" class="social-icon"</a> <a href ="http://facebook.com/michael.puodziukas"><img src= "img/facebook-wrap.png" alt= "Facebook logo" class="social-icon"></a> <p>© 2016 Michael Puodziukas.</p> </footer> </div> </body> </html>
about.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Michael Puodziukas | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400i,700,700i,800" rel="stylesheet"> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css">
</head> <body> <header> <a href="index.html" id="logo"> <h1>Michael Puodziukas</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html"class="selected" >About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <img src="img/Michael.jpg" alt="Photograph of Michael Puodziukas" class="profile-photo"> <h3>About</h3> <p>Hi, I'm Michael Puodziukas! This is my design portfolio where I share all of my favorite work. When I'm not designing things, I enjoy swimming, playing video games, drinking good coffee, and more.</p> <p> If you'd like to follow me on Twitter, my username is <a href ="http://twitter.com/puodziukasm">@puodziukasm</a>.</p> </section> <footer> <a href ="http://twitter.com/puodziukasm"> <img src="img/twitter-wrap.png" alt= "Twitter logo" class="social-icon"</a> <a href ="http://facebook.com/michael.puodziukas"><img src= "img/facebook-wrap.png" alt= "Facebook logo" class="social-icon"></a> <p>© 2016 Michael Puodziukas.</p> </footer> </div> </body> </html>
6 Answers
William Mackay
25,189 Pointshttps://w.trhou.se/vrplhtoubi this is how my workspace looks for this project.
William Mackay
25,189 PointsWhat is it not doing?
Stefan Plötz
6,237 PointsSince I cant find anything and not knowing what your css code isnt doing: Did you check your link tag in your html? I often mix up href and src attributes. Consider getting a IDE. It will highlight basic errors like spelling mistakes.
Christian Ohm
7,930 PointsTry adding type="text/css".
Rafael silva
23,877 Pointsyou need only to check your document if href="css/main.css" or you need only to add href="main.css" if your main.css is not inside of some folder , before I had some trouble like this, I hope help you .....
MICHAEL P
5,191 PointsTHanks everyone. I got it working now!
Cheo R
37,150 PointsCheo R
37,150 PointsHello Michael, to format your code CSSS cod with three backticks, followed by CSS, your code, ending with three more backticks. Do the same with your html. Formatted code helps read through it for problems.