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

CSS How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Kris Reid
Kris Reid
17,133 Points
Posted by Kris Reid
Kris Reid
17,133 Points

Two column layout of my "about page"

Hi this is my first post and I hope someone can help. I've followed the video exactly but when I create the two column layout and changing the .profile-photo, there is still text displayed under the picture even when the window is at 480px.

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

That's the CSS code I have at the moment when is what is supposed to look like, I hope it's not sometime silly like I have too much text because I would have thought it wouldn't have mattered surely?

Anyways, thanks in advance!

Kris

1 Answer

James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

If you have a paragraph element under the .profile-photo and you want that to be next to the photo to create two column layout then you need to delete clear:both 'if you have that already'. Then you need to clear:both when the the viewport is less 'or equal' too your 480px breakpoint media query.

Hope that helps, if not then post your full code.

Kris Reid
Kris Reid
17,133 Points
Kris Reid
Kris Reid
17,133 Points

Thanks for your reply! I've actually been playing around with it further and I found the best way to do it at the moment was to just increase the bottom margin, I increased it from 80px to 150px which solved the issue. Not sure if that's the right way to go about it and I'm sure your method works more efficiently!

Cheers!

James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

Yea same thing really mate, both of these ways force the element to grow up. Well done, thanks for the vote.