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

JavaScript Treehouse Club - MASH MASH - CSS Changing Stuff in Your Style Sheet

David Borrero
David Borrero
3,089 Points

Problem with long text in one question shifting one section down.

Hello.

In the style.css tab I have 4 choice-buckets aligned evenly with width 25%. One of the questions is long and the last word moves to the line below as such:

Your future / profession?

The other 3 questions only take one line like this:

Where will you live?

I have a problem with the long question shifting all the answer boxes below downward, while the other ones stay the same. How can I make the other 3 also shift down?

This is my workspace (I hope I'm sharing this snapshot correctly. First time) https://w.trhou.se/0y1d1tyvqj

Thank you, David

1 Answer

Shaunty McMillin
Shaunty McMillin
6,964 Points

You could accomplish this by setting a height and overflow on the headers in the CSS , like so:

h4 .highlight {
height: 20px;
overflow: visible; 
}

The height makes it so that you can use the overflow element. By setting the height you also make it so that the elements will be consistently sized, preventing them from pushing the next element down in some cases but not others. Finally, by setting the overflow to visible you ensure that the text will show up regardless, but the element won't push down the text boxes. There is some danger in that, as the text could continue under the the text boxes. If you would prefer you can also set the overflow to hidden, which will cut off any text that goes outside the element.