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

Morten Larsen
Morten Larsen
12,275 Points

Responsive webdesign - mediaqueries

I have this section which im trying to put into a two column layout:

    <section> <!-- Break up a page into logical groups of information -->
        <img src="img/morten.jpg" alt="Photograhp of Morten Larsen" class="profile-photo">
        <h3>About</h3>
        <p>Hi, I'm Morten Larsen, this is my webdeveloper portfolio, where I will try to track my process learning with teamtreehouse. My goal is to become a webdeveloper. Ressources I will use will school, courses and the frontend developer techdegree program. At my disposal will also be teamtreehouse tracks and library. I will supplement my knowledge further with all the ressources on the internet I find relevant</p>
        <p>Topics I want to master is: 
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
                <li>Wordpress</li>
                <li>PHP</li>
                <li>Design & Usability</li>
            </ul>
        If you'd like to learn more about my work, visit my portfolio.</p>
    </section>

But since the text is so long its wraps around the image. I want the image to my left, and then the text to the right.

In my responsive.css i have done this according to Nick Petitts video.

@media screen and (min-width: 480px) {
.profile-photo {    
float: left;
    margin: 0 5% 4px 0;
}
}

But text is still wrapping around my image? Anyone who can point me in the right direction?

This is the video im watching: https://teamtreehouse.com/library/how-to-make-a-website/responsive-web-design-and-testing/adjust-the-profile-page-and-header

2 Answers

Hey Morten, try increasing your bottom margin (the third in the shorthand value) to 80px. That's what Nick uses in his video and it should prevent the text from wrapping.

Morten Larsen
Morten Larsen
12,275 Points

Thank you very much. I did try with 80px. That didnt work. But i did find out why. I wrote i bit more text than Nick. So therefore i had to increase the bottom margin way more than 80px. Now its working.

Thank you for pointing me in the right direction.