Why my text are not in one line instead on several lines

1

hi all

There is something in my code that is making my text arranged in several lines instead in one line. Even when i increase the padding it get worse.

When you hover over the project you will see the text.

i just want the text in one line

The link to the code.
https://jsfiddle.net/AlexanderThe3rd/8ztdyuLn/2/

2

I think white-space property solves your problem.

.project_2 figcaption {
 white-space: nowrap;
 padding: 4px;
}
2 Likes
3

thanks a mil. It worked!!! :love_you_gesture:

But i wonder why the text are aligned vertically and are not in one line. Whats making it do that.?

i am thinking maybe a position or display rule is causing the text to appear in several lines instead on one line.

Anyone knows why…?

4

No problem at all. I just checked your code again. You have too much padding on the figcaption element.
Try to lower its padding property to like 50px or whatever you like.
This will also help you achieve your goal without adding white-space property.

.figcaption {
  padding-left: 50px;
  padding-right: 50px;
}