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 Responsive Web Design and Testing Adjust the Profile Page and Header

MICHAEL P
MICHAEL P
5,191 Points

Problem 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>

Cheo R
Cheo R
37,150 Points

Hello 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.

6 Answers

https://w.trhou.se/vrplhtoubi this is how my workspace looks for this project.

What is it not doing?

Since 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
Christian Ohm
7,930 Points

Try adding type="text/css".

you 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
MICHAEL P
5,191 Points

THanks everyone. I got it working now!