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 How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Posted by Stanley Abraham
Stanley Abraham
3,260 Points

Cant seem to figure out why my image wont float to the left.

@media screen and (min-width: 480px) {

/************************************ TWO COLUMN LAYOUT ************************************/

#primary { width: 50%; float: left; }

#secondary { width: 40%; width: 40%; float: right; }

/************************************ PAGE: PORTFOLIO ************************************/

#gallery li{ width:28.3333% } #gallery li:nth-child(4n){ clear:left; }

/************************************ PAGE: ABOUT ************************************/

.profile-pic { float: left; margin: 0 5% 80px 0; }

}

@media screen and (min-width: 660px) {

}

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Stanley Abraham | Designer |</title> <link rel="stylesheet" href="css/._normalize.css"> <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> ="stylesheet" href="css/responsive.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Stanley Abraham</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/Stan.jpg" alt="Profile pic of Stan" class="profile-photo"> <h3>About</h3> <p>I'm a man with a dream. A very simple dream, mostly involving food and beer, but a dream nonetheless.</p> <p>Follow me on twitter <a href="https://twitter.com/StanDaMan777">@standaman777</a>.</p>

  </section>  
  <footer>
    <a href="https://www.facebook.com/stanley.abraham.560"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
    <a href="http://instagram.com/standaman777"><img src="img/instagram-logo.png" alt="Instagram Logo" class="social-icon"></a>
    <a href="https://twitter.com/StanDaMan777"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
    <p> Socail media links</p>
    <p>&copy; 2014 Stanley Abraham</p>
  </footer>
</div>

</body>
</html>

3 Answers

Philip G
Philip G
14,600 Points
Philip G
Philip G
14,600 Points

You don't bind in your CSS correctly. Try this:

'''html

<!DOCTYPE html>

<meta charset="utf-8"> <title> Stanley Abraham | Designer |</title> <link rel="stylesheet" href="css/._normalize.css"> <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css">

<header> <a href="index.html" id="logo"> <h1>Stanley Abraham</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/Stan.jpg" alt="Profile pic of Stan" class="profile-photo"> <h3>About</h3> <p>I'm a man with a dream. A very simple dream, mostly involving food and beer, but a dream nonetheless.</p> <p>Follow me on twitter <a href="https://twitter.com/StanDaMan777">@standaman777</a>.</p>

</section>
<footer> <a href="https://www.facebook.com/stanley.abraham.560"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <a href="http://instagram.com/standaman777"><img src="img/instagram-logo.png" alt="Instagram Logo" class="social-icon"></a> <a href="https://twitter.com/StanDaMan777"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <p> Socail media links</p> <p>© 2014 Stanley Abraham</p> </footer> </div>

'''

P.S.: Forgetting the <link rel is a pretty common mistake of you. You did the same there:

https://teamtreehouse.com/forum/columns-wont-float-i-dont-know-what-im-doing-wrong-please-help

:)

Stanley Abraham
Stanley Abraham
3,260 Points

I still I'm trying to figure out how I forgot the <link rel. I don't understand where I made an error. Could you please explain?

Philip G
Philip G
14,600 Points

Does it work now? Unfortunately I don't know what you want me to explain. Can you please reword it? :)

Kevin Stapleton
Kevin Stapleton
6,048 Points
Kevin Stapleton
Kevin Stapleton
6,048 Points

Hi you have the class name as ".profile-pic" on the About page though it's "profile-photo"

<img src="img/Stan.jpg" alt="Profile pic of Stan" class="profile-photo">

Stanley Abraham
Stanley Abraham
3,260 Points

This wasn't the issue. I was just rewrote the class "profile pic to see if it was a CSS problem. But thank you for your help.

Rosangela Guerra
Rosangela Guerra
2,230 Points
Rosangela Guerra
Rosangela Guerra
2,230 Points

I was having the same problem. You need to put a semi-colon after 28.3333%; <--- Also, even though it's not part of the instructions, after width: 28.3333%; add margin: 2.5%; This is for 3 columns of images, so: the width of each image is 28.3333% = 85% of the page. We add a 2.5%margin to each image and since there are three images (or columns), each gets a 2.5% margin on each side.. since we're only considering the sides: 2.5 x 6(2 sides on every image) = 15. SOooo, 85% + 15% = 100%.

Hope this helps.