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 trialmettaju
795 PointsI am not sure why the image is not moving above the text for mobile view.
/****************************
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% 800px 0;
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 660px){
/****************************
PAGE: HEADER
*****************************/
nav {
background: none;
float: right;
font-size: 1.125em;
margin-right: 5%;
text-align: right;
width: 45%;
}
}
</header>
<div id="wrapper">
<section>
<img src="img/juliana.png" alt="Photo of Juliana" class="profile-photo">
<h3>About</h3>
<p>Hi. I am Juliana.<br><br>I have worn multiple hats.
I have worked with students, HR team members, instructional specialists, and even meditators to design processes, products and differentiated experiences. Having lived abroad and trotted across four continents, my travels have deepened my curiosity and empathy.
<br><br>Do you need help solving a design problem? Please contact me at <a href="mailto:hello@julianaschwartz.co" target="_blank">hello@julianaschwartz.co</a>.
</p>
</section>
</div>
5 Answers
Aladdin Sidahmed
1,111 PointsHi Juliana,
Your code looks good. You may want to revise the margin under the .profile-photo to 80px instead of 800px The code should look like this:
.profile-photo {
float: left;
margin: 0 5% 80px 0;
}
mettaju
795 PointsHi Aladdin,
Thank you for your response and suggestion!
Matt Wearp
2,965 PointsHaving the same problem except my code is exactly the same as it is supposed to be.
Any suggestions? Thanks
Aladdin Sidahmed
1,111 PointsHi Mathew,
Can you please share your code?
mettaju
795 PointsHi Matthew,
I eventually resolved it, but I am not sure exactly how! Lol.
Try looking at your media queries and where the photo will float (left vs. center) with different sizes.
I am really new to this, so I am not sure how helpful that was.
Good luck!
Marcus Stigall
13,252 PointsI had the same problem just now. my curly brace for the @media wasn't wrapped around the end of the code.