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

Mayur Pande
PLUS
Mayur Pande
Courses Plus Student 11,711 Points
Posted by Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

My text is slightly wrapping around the bottom of my picture when expanding the browser

My text slightly wraps around the bottom of the picture when converting from mobile to web view on the browser. Initially I tried to increase the margin at the bottom, but this did nothing, so I have set it back to the normal 70px.

Here is a link to my site

2 Answers

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

Yes, the text is designed to wrap around. If you don't want this behavior, you could instead set the left margin to be a bit more than the width of the image in your desktop styles. This would force the text to not wrap around the image.

ub46473788
ub46473788
8,782 Points

Adjusting the left margin didn't fix the wrapping behavior for me. I set the bottom margin to 200%, and that fixed it as far as I can tell. But is that going to create problems when viewing the page from different sized screens?

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

Setting a large bottom margin will probably have undesired behavior at some point. It isn't really a good way to get the look you're going for.

Here's an example of how you might re-work your html and css to achieve about text that doesn't wrap around the image.

<section id="about"> <!-- you'll need an id or class so you can select only this section -->
    <img src="img/profile-photo.jpg" alt="Profile Photo" class="profile-photo">
    <h3>Rydavim</h3>
    <p>Lorem ipsum dolor sit amet, eu pri fugit sonet aliquid, ne enim dolore reformidans eam, sed in facete vocent dolores. Ei ullum eligendi imperdiet quo, cu primis praesent facilisis sit, mea quod forensibus dissentias ne.</p>
    <p>Cum id nulla dicam, dictas aeterno ex nam. Movet pericula at has, pro lobortis sadipscing instructior eu. Populo elaboraret pro ad, ignota volumus has ut.</p>
</section>

 // you'll want to set the left margin to be a bit more than the width of the profile img
#about h3, #about p { 
  margin-left: 200px;
}

If that doesn't help you solve your problem, please post a new question thread with your code included.

Mayur Pande
PLUS
Mayur Pande
Courses Plus Student 11,711 Points
Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

Hi sorry for late reply with this, have been tied up elsewhere. I understand the text is meant to wrap around. However the second paragraph in the about page stretches the whole length of the picture and the first paragraph when a mobile device is switched to horizontal mode. I thought that it was meant to be two sections so that the second paragraph would be aligned right with the first paragraph. Like in the contact page. Hope this makes sense.