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

Posted by mettaju
mettaju
795 Points

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

Aladdin Sidahmed
Aladdin Sidahmed
1,111 Points
Aladdin Sidahmed
Aladdin Sidahmed
1,111 Points

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; 
}
mettaju
mettaju
795 Points
mettaju
mettaju
795 Points

Hi Aladdin,

Thank you for your response and suggestion!

Matt Wearp
Matt Wearp
2,965 Points
Matt Wearp
Matt Wearp
2,965 Points

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

Any suggestions? Thanks

Aladdin Sidahmed
Aladdin Sidahmed
1,111 Points

Hi Mathew,

Can you please share your code?

mettaju
mettaju
795 Points
mettaju
mettaju
795 Points

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!

Marcus Stigall
Marcus Stigall
13,252 Points
Marcus Stigall
Marcus Stigall
13,252 Points

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