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
Cristian Brownlee
8,061 PointsHow do I stop the text from wrapping around an image when resizing browser window?
Focusing on Nick's "How to Make a Website" course, specifically relating to the video titled "Adjust the Profile Page and Header", code-wise from what I can see mine are identical to his, however when I make the window smaller my text wraps around my image. In the video the 'h3' and 'p' all fall below his image. Please see codes below:
main.css
.profile-photo {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
responsive.css
.profile-photo {
float: left;
margin: 0 5% 80px 0;
}
Cristian Brownlee
8,061 PointsThanks but it still wraps. Firstly as it stands my content in the tag is really no more than the content in Nick's tag. Increasing the bottom margin doesn't stop the text wrapping to the right, but only increasing the space below it.
sofianjeridi
1,364 Points@Cristian Brownlee i've got the same problem. I think it's a browser related problem since our mediaquery ONLY applies to screens LARGER than 480px.
I mean that trying to adjust the mediaquery for smaller screens is useless since it's behaving like it should (on screens >480px).
BUT on a smaller screen our initial design should have stayed the same... (since our mediaquery only applies to screens >480px) but suddenly it seems to behave differently... strange...
@media screen and (min-width: 480px) {
/PAGE: ABOUT/
.profile-photo { float: left; margin: 0 5% 80px 0; }
}
Cristian Brownlee
8,061 Points@sofianjeridi Unfortunately I never did get to the bottom of it, however I did copy and paste Nick's final work and that resolved the problem so I can definitely confirm that there was an error with the code.
sofianjeridi
1,364 Points@Cristian Brownlee
allright I solved the problem... :-p after reading this don't ask me what actually happens with the code... I have no idea :-p
you need to put css rules in the right order!
if you structure the code like this it WON'T work :
/PAGE: PORTFOLIO/
#gallery li:nth-child(4n) { clear: left; }
/PAGE: ABOUT/
.profile-photo { float: left; margin: 0 5% 80px 0; }
If you structure the code like hereunder it will work :
/PAGE: ABOUT/
.profile-photo { float: left; margin: 0 5% 80px 0; }
/PAGE: PORTFOLIO/
#gallery li:nth-child(4n) { clear: left; }
It's just a matter of changing the order of the CSS rules.
alastair cooper
30,617 Pointsalastair cooper
30,617 PointsIf you have written a lot in the <p> tag then you may have to increase the bottom margin in .profile-picture (currently set to 80px). Override the .profile-picture inside the Media query (paste it into it and change the bottom margin to 100px or more)