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

Cristiano Porto
Cristiano Porto
5,850 Points
Posted by Cristiano Porto
Cristiano Porto
5,850 Points

Text wrapping underneath my image?

On my about page of this project. I'm working on the responsive design, I followed each step but when I check my preview page, for some reason part of my ABOUT text wraps underneath my image, even tho I have specifically followed instructions and floated my picture to the left . How do I fix this?

here is my workspace code : https://teamtreehouse.com/workspaces/26179602#

7 Answers

Cory Harkins
Cory Harkins
16,500 Points
Cory Harkins
Cory Harkins
16,500 Points

The link to your workspace is broken.

Please post the HTML and CSS mark up so we can get to the bottom of this!

Cristiano Porto
Cristiano Porto
5,850 Points
Cristiano Porto
Cristiano Porto
5,850 Points

How Do I post the mark up here?

Cory Harkins
Cory Harkins
16,500 Points
Cory Harkins
Cory Harkins
16,500 Points

Code

Wrap your code with 3 backticks (```) on the line before and after. If you specify the language after the first set of backticks, that'll help us with syntax highlighting.

      ```html
      <p>This is code!</p>
      ```
Cristiano Porto
Cristiano Porto
5,850 Points
Cristiano Porto
Cristiano Porto
5,850 Points 
<!DOCTYPE.html>
<html>
  <head>
    <title>Cristiano Porto | Developer </title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="Css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,700" rel="stylesheet">
    <link rel="stylesheet" href="Css/treehouse.css">
    <link rel="stylesheet" href="Css/responsive.css">

  </head>
  <body>
<!-- header section of the webpage -->
    <header>
      <a href="index.html" id="logo">
        <h1>Cristiano Porto</h1>
        <h2>| Web Developer |</h2>
      </a>
      <nav>
        <ul>
          <li><a href="treehouse.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>
    <!-- main area of webpage -->
    <div id="wrapper">
      <section>
        <img src="img/Cristiano.jpg" alt="Cristiano's headshot" class="profile-photo">

          <h3>About</h3>
          <p>Hi, I am Cristiano Porto! This is my design portfolio where I share most of my work. As I searched for my passion in life I came across programming. It all started as a fun and interesting
            hobby but quickly became much more than that. As I developed my skills and learned to love web design I kept on working on new projects. Not only do I develop websites, but I also specialize in Mobile apps and E-commerce.
          <br>My goal is to help those who need my services thrive! My clients success are my own, I take great resposability and pride assisting others with my knowledge and programming skills.
          <br>Feel free to follow me on all social media platforms, including<a href="http://www.facebook.com/"> facebook </a>and<a href="http://www.linkedin.com"> LinkedIn </a> </p>

      </section>

<!-- Footer section of webpage -->
      <footer>
        <a href="http://twitter.com"><img src="img\twitter-wrap.png" alt="Twitter logo" class="social-icon"></a>
        <a href="http://facebook.com"><img src="img\facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Cristiano Porto</p>
      </footer>
  </div>
</body>
</html>
Cristiano Porto
Cristiano Porto
5,850 Points
Cristiano Porto
Cristiano Porto
5,850 Points 
/*********************
  RESPONSIVE LAYOUT
*********************/

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

  /*********************
    BEGGINIG OF DESKTOP REPONSIVE DESIGN BELOW
  *********************/
}

@media screen and (min-width: 660px) {
  /*********************
    TWO COLUMN LAYOUT
  *********************/
  #primary {
    width: 50%;
    float: left;
  }
  #secondary {
    width: 40%;
    float: right;
  }


  /*********************
    PAGE : PORTFOLIO
  *********************/

  #gallery li {
    width: 28.3333%;
  }
  #gallery li:nth-child(4) {
    clear: left;
  }

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

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

}
Cory Harkins
Cory Harkins
16,500 Points
Cory Harkins
Cory Harkins
16,500 Points 
#gallery li:nth-child(4n) {
   clear: left;
}

Let me know if that works!

Cory Harkins
Cory Harkins
16,500 Points
Cory Harkins
Cory Harkins
16,500 Points

If that doesn't work, check that your sizes for the profile pic doesn't conflict with the width of the text content.

You can have an issue where your profile pic is too large, and the text block is too large, therefore the difference will not resolve at that pixel width.

if you have a screen max at 660px:

if your pic is 200px, and your text block is 500px, the text will wrap underneath.

if your pic is 200px and your text block is 400 px, BUT your margins are 20px; 20px --- 200px --- 20px 20px --- 400px --- 20px; You have too many px... (680px)

if your text block has padding, it will expand your text box... think about those dimensions as well as they will ADD.

20px(margin)--15px(padding)--400px(content)--15px(padding)--20px(margin) = 470 + image(width/padding/margin)