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 Sothan
Michael Sothan
8,048 Points
Posted by Michael Sothan
Michael Sothan
8,048 Points

Profile page text always breaks before nav elements

I've followed the steps of the video quite closely. Everything is working in my playground version the same except for the About page text seems to always break in the center of the page before the right floated nav elements in the header.

My main page css for the About text is:

.profile-photo { display: block; float: left; margin: 50px 5% 100px 0; max-width: 150px; border-radius: 100%; }

description {

text-align: justify; max-width: 500px; padding: 0 5%; }

My responsive page css media query for the about page is: @media screen and (min-width: 480px) {

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

Driving me mad. Any ideas?

1 Answer

Robert Leonardi
Robert Leonardi
17,151 Points
Robert Leonardi
Robert Leonardi
17,151 Points

is description a class of p tag within the <div id="wrapper"> ?

As for responsive.css : 

@media screen and (min-width: 480px) { .profile-photo { float: left; margin: 0 5% 80px 0; } }

and main.css :

.profile-photo { display: block; float: left; margin: 50px 5% 100px 0; max-width: 150px; border-radius: 100%; }

I tried the code and the page works exactly as the video