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

I 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

Hi 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; 
}

Hi Aladdin,

Thank you for your response and suggestion!

Having the same problem except my code is exactly the same as it is supposed to be.

Any suggestions? Thanks

Hi Mathew,

Can you please share your code?

Hi 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!

I had the same problem just now. my curly brace for the @media wasn't wrapped around the end of the code.