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

Rebecca Townsend
Rebecca Townsend
4,170 Points
Posted by Rebecca Townsend
Rebecca Townsend
4,170 Points

Text in about page wrapping around profile photo word-by-word when resizing screen.

Can someone help me understand where my code is wrong? Instead of the paragraph text jumping below the profile photo to create a single column page, my text wraps below the photo word by word. My responsive.css code is below, followed by my about.html code, followed by the relevant part of my main.css code

Thank you!

****RESPONSIVE CSS****
  @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;
  }


****HTML****


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Rebecca Townsend | Program Manager</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Changa+One:400,400i|Open+Sans:400,400i,800" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>My Name</h1>
        <h2>My Position</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/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo">
        <h3>About</h3>
        <p>Hi, I'm Nick Pettit! This is my design portfolio where I share all of my favorite work. When I'm not designing things, I enjoy exercising, playing video games, drinking good coffee, and more.</p>
        <p>If you'd like to follow me on <a href="http://twitter.com">Twitter</a>, my username is @nickrp.</p>
      </section>
      <footer>
        <a href="https://www.facebook.com/rebecca.townsend.167"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2016 Rebecca Townsend.</p>
      </footer>
    </div>
  </body>  
</html>

**** MAIN CSS ****


/*************************************
GENERAL
**************************************/

body {
  font-family: 'Open Sans', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
text-decoration: none;
}

img {
  max-width: 100%;
}

/*************************************
HEADING
**************************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif; 
  margin: 15px 0; 
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}

h3 {
  margin: 0 0 1em 0;

}

/*************************************
NAVIGATION
**************************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}



/*************************************
FOOTER
**************************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}

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

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

2 Answers

Jacob Mishkin
Jacob Mishkin
23,117 Points

Do you want the photo to be aligned center above the about paragraph? If you always want the photo to be on top, under the class .profile-photo remove the float left, and add a width of whatever you want, then set the margin to 0 auto. if that's not the case, can you tell me of what you want to do.

Rebecca Townsend
Rebecca Townsend
4,170 Points
Rebecca Townsend
Rebecca Townsend
4,170 Points

Thanks for your response. I don't want the photo to always be on top. I want it to be on top of the paragraphs on devices with a screen width < 480px. On larger screens I want the paragraphs to be to the right of the photo. Right now, at 480px or less, the paragraphs do push directly below the photo, but instead of "jumping" in one block, they move below the photo word by word as you shrink the width of the page.

Jacob Mishkin
Jacob Mishkin
23,117 Points

I would try to float left the image and add padding left to the image. for your base styles, then at 480 remove the float.

Alexander Kobilinsky
Alexander Kobilinsky
359 Points
Alexander Kobilinsky
Alexander Kobilinsky
359 Points

555-555-0199@example.com