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

Posted by Fung How Lim
Fung How Lim
2,402 Points

The Caption of My Site breaks out when the screen is minimized. Help needed! :(

Hi there,

This is Steve, currently learning front-end development from Nick Petit. Would like to request for your help to resolve this issue.

I did not notice this earlier, but as i progress through the course i noticed that the caption has broken out from the space. shown here; http://imgur.com/2X6GHDL

my code is stated at the bottom;

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>steve lim | Try Out</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,700,700italic,400italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>steve lim</h1> <h2>Entrepreneur</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="images/numbers-01.jpg"> <img src="images/numbers-01.jpg" alt=""> <p>Experimentation with texture and colours.</p> </a>
</li> <li> <a href="images/numbers-02.jpg"> <img src="images/numbers-02.jpg" alt=""> <p>Experimentation with texture and colours.</p> </a>
</li> <li> <a href="images/numbers-06.jpg"> <img src="images/numbers-06.jpg" alt=""> <p>Experimentation with texture and colours.</p> </a>
</li> <li> <a href="images/numbers-09.jpg"> <img src="images/numbers-09.jpg" alt=""> <p>Experimentation with texture and colours.</p> </a>
</li> <li> <a href="images/numbers-12.jpg"> <img src="images/numbers-12.jpg" alt=""> <p>Experimentation with texture and colours.</p> </a>
</li> </ul> </section> <footer> <a href="http://twitter.com/funghow"><img src="images/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/fhlow"><img src="images/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2016 Steve Lim.</p> </footer> </div> </body> </html>

could someone point out my mistake? your help would be greatly appreciated. thank you so much..

4 Answers

anil rahman
anil rahman
7,786 Points
anil rahman
anil rahman
7,786 Points

Use this in the styling of those divs/captions:

word-wrap: break-word;
Fung How Lim
Fung How Lim
2,402 Points

Hi Anil.R,

Does this solve the problem permanently? Could you explain a little bit more about this property?

I don't think this was ever explained in the tutorial.. unfortunately.

Best, S.

Fung How Lim
Fung How Lim
2,402 Points

Hi Anil.R,

About word-wrap, is it correct if my code is written like this;

<p>Experimentation with texture and color<p> word-wrap: break-word;

Could you advise me on this?

anil rahman
anil rahman
7,786 Points
anil rahman
anil rahman
7,786 Points

I'm not sure i haven't used it much myself, to keep things simple i think you could/should switch it to overflow: hidden. This option will be a lot more familiar and will be mentioned in a tutorial along the way so try this and if it fixes the issue just use this simple property. All it does is set anything that overflows out of the box as hidden so it wraps it instead of letting it go outside the div.

Fung How Lim
Fung How Lim
2,402 Points

Hi Anil.R,

Erm. Could you write a line of code using word-wrap: break-word;?

I'd like to know how i should include it into the code above. Thanks Anil.

Erm. i think this is the downside of online learning.. no one to turn to besides doing researches and forums. So your help is highly appreciated!

best, S

anil rahman
anil rahman
7,786 Points
anil rahman
anil rahman
7,786 Points

Try this: 

li {
 word-break: break-word;
}

or this:

  ul li {
    word-break: break-word;
}
sean jones
sean jones
5,682 Points
sean jones
sean jones
5,682 Points

You could try adding some padding and margins to the paragraph element. I just checked out my own workspace and I'm not getting the overflow. try this code 

#gallery li p {
    padding: 5px 5px 0 0 ;
    margin: 3px 3px 3px 3px;
}