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 trialKris Reid
17,133 PointsTwo 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
11,901 PointsIf 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
17,133 PointsKris Reid
17,133 PointsThanks 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
11,901 PointsJames Ingmire
11,901 PointsYea same thing really mate, both of these ways force the element to grow up. Well done, thanks for the vote.