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 Styling Web Pages and Navigation Review: Styling Web Pages and Navigation

Posted by Austin Johnston
Austin Johnston
3,927 Points

how do i prevent my caption length from messing with my formatting?

When I apply the float:left; etc, my images appear side by side at normal browser size. When I shrink my browser to "mobile size" my caption length messes with orderly format.

In other words, I have 5 images, but are arranged un-orderly. normal browser size: 2 images per row, until last odd number image. mobile size browser: 1st row 2 images, 2nd row 1 image, 3rd row 2 images.

its because my caption is too long for image one, what are the ways to prevent this besides messing with the caption itself. some type of ellipse, or max caption = all caption size type thing??

Christopher Lebbano
Christopher Lebbano
15,338 Points
Christopher Lebbano
Christopher Lebbano
15,338 Points

There is a fix for this, but if you keep going in the web design / front end track you'll see that you don't even want to use floats for image positioning anyway.

In other words there are much easier, organized ways to control image positioning on all screen sizes, such as flexbox.

2 Answers

Adrian Navarro
Adrian Navarro
7,424 Points
Adrian Navarro
Adrian Navarro
7,424 Points

Well yeah CSS has a text-overflow property with a value called ellipsis and you can use it to do that. Also setting a max width for the caption in a media query for the mobile size will do.

But I will recommend using different approaches like flexbox layouts for image positioning.

Sia Hua Jiuh
Sia Hua Jiuh
11,138 Points
Sia Hua Jiuh
Sia Hua Jiuh
11,138 Points

Dear Austin,

There are many ways/combination to do this. The easiest way is flexbox, bootstrap. Media query will do but require more css like max width, max height (if needed), text-overflow, clear, float, display etc.

Rgds Sia