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 stevencooper
stevencooper
5,755 Points

How do I 'stack' text under a photograph?

I'm learning the css coding and have a problem with my "about" page. Nick has gotten us to where we have a photo in the left column and text in the right, when the page size is of a tablet or desktop monitor.

When reducing the size of the page to that of a smart phone, instead of the text stacking below the photo, it makes a thin column of print down the right side of the photo, with only some of the text 'stacked'.

I have followed Nick P's coding, and the index.html page works properly with the photos going from 3 column to 2 column without any strange positioning of the photos. The contact page also works with the 'contact details' of phone, email, & twitter being in the right side column until the page is sized down to smart phone size, at which time the entire column 'stacks' under the content of the 1st column.

Any suggestions? Which part or parts of my code do you need to see to help? As soon as I know, I'll post it.

Thank you for your help.

Nick Ocampo
Nick Ocampo
15,661 Points

It sounds like your using a grid, so like Nicholas said, we'd have to look at your code to see what's going on. As a quick fix though, inside the media query that you're using to target mobile devices, add this to your CSS (I'm pretending that your image has a class of "my-image"):

.my-image {
display: block;
}

"display: block" makes it so the element is displayed as a "block" that covers the viewport from left to right and pushes any element after it below it.

Michael Mahler
Michael Mahler
8,560 Points

I second this answer^

2 Answers

Bradley Davis
Bradley Davis
5,918 Points
Bradley Davis
Bradley Davis
5,918 Points

Maybe if the image is floated you could clear: both; on the text you want to stack underneath?

Brian Polonia
Brian Polonia
25,139 Points
Brian Polonia
Brian Polonia
25,139 Points

You could use the HTML 5 tags, figure and figcaption. You would open a figure tag, place your img within it and place a figcaption tag right after it. The text you place within the figcaption will be stacked directly below the img. The figure tag acts as a container for the img and caption of the img.

The example code is below:

<figure>
  <img src="example.jpg" alt="Example alt text">
  <figcaption>Example caption you want to place below the img</figcaption>
</figure>

Hope this helps.

  • Brian