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
Jop Wieffer
658 PointsPicture is not presented above the text when making the browser very small, it stays to the left.
What did I do wrong? Looked over it but followed all the instructions in the videos.
3 Answers
Jop Wieffer
658 Points<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<tile>Jop Wieffer | Web development</tile>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Exo+2:400,400italic,700,700italic,800|Coda:400,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Jop Wieffer</h1>
<h2>Web development</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/jop.jpg" alt="Foto van Jop Wieffer" class= "profile-photo">
<h3>About</h3>
<p>Hallo, Ik ben Jop Wieffer. Dit is mijn portfolio, waar ik een aantal van mijn projecten presenteer.</p>
<p>Ik ben beschikbaar voor kleine projecten op het gebied van (online) marketing. Van plan tot realisatie en van design tot inhoud. Neem contact met me op voor de mogelijkheden</p>
</section>
<footer>
<a href="http://twitter.com/swieffel"><img src="img/twitter-wrap.png" alt= "Twitter Logo" class="social-icon"></a>
<a href="http://Facebook.com/jop.wieffer"><img src="img/facebook-wrap.png" alt= "Facebook Logo" class="social-icon"></a>
<p>© 2015 Jop Wieffer.</p>
</footer>
</div>
</body>
</html>
@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) {
}
miguelcangueiro
5,473 PointsIn you css file after the #secondary you are closing the media query. Delete the second } after #secondary and it should be good to go.
Jop Wieffer
658 PointsThanks for the quick respones. Still not working though. Now have:
@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) {
}
Kevin Cross
1,145 Pointshad the same problem as you did. I removed the squiggly bracket after #secondary and tabbed everything after page portfolio comment over so it would still be the correct because it is still with the "@media screen and (min-width: 480px) {}" css rule. Saved it and refreshed it, then it worked out like the video showed. Hope i was a help to you.
miguelcangueiro
5,473 PointsIn you html file there are some whitespaces that are causing some issues as well.
<img src="img/jop.jpg" alt="Foto van Jop Wieffer" class= "profile-photo">
Should read:
<img src="img/jop.jpg" alt="Foto van Jop Wieffer" class="profile-photo">
<a href="http://twitter.com/swieffel"><img src="img/twitter-wrap.png" alt= "Twitter Logo" class="social-icon"></a>
<a href="http://Facebook.com/jop.wieffer"><img src="img/facebook-wrap.png" alt= "Facebook Logo" class="social-icon"></a>
Should read:
<a href="http://twitter.com/swieffel"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://Facebook.com/jop.wieffer"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
Jop Wieffer
658 PointsThanks for that. Do you have other sources where I can find a solution for my profile picture issue? Can continue the track now..
miguelcangueiro
5,473 PointsI'm sorry I couldn't help you with that. Maybe you can ask some more experienced people here for help.
miguelcangueiro
5,473 Pointsmiguelcangueiro
5,473 PointsDid you make sure the code you wrote to float the profile photo is inside the correct media query? Should be inside the media query:
@media screen and (min-width: 480px) {}