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 Michael Hicks
Michael Hicks
24,124 Points

Responsive Profile Page Problem

When styling the profile page I'm having trouble making this part of the web site responsive. The code should push the text below the profile image when the width of the browser is at its smallest, but the text remains to the right. Can anyone shed some light on this issue? My code is below.

CSS CODE BELOW

.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 100%;
}

1 Answer

Andrew Helton
Andrew Helton
4,681 Points
Andrew Helton
Andrew Helton
4,681 Points

Hi Michael,

Have you set your media query yet in the responsive.css file?

Should look something like this:

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

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

  .profile-photo {
    float: left;
    margin: 0 5% 80px 0;
  }
}
Michael Hicks
Michael Hicks
24,124 Points

Yes! I wrote the correct code, but the CSS profile-photo class selector was not embedded inside the media query, it was further down the page outside the curly brackets. It's working now. Thank you Andrew!