how to stretch Title and description text wider than the thumbnail image

[pavloradich]

Hi, my title and description are wider than my thumbnail image (I need thumbnail to be pretty small), and I don't like how it start going on a third line. How to let them stretch in their full width (wider than the thumbnail)?

Please see image.
Thank you!

[arminunruh]

its a project thumbnail right?

.thumb .title{
white-space: nowrap;
}

can u try this css in lay options → custom css & html

[pavloradich]

@arminunruh Worked, but it positioned the text aligned to the left, and not center, for some reason.
PS. I have "align to center" activated in thumbnail settings.

[felix_rabe]

@pavloradich you can make the thumbnail in the gridder a big wider and shrink the size of the image in it with css. You can inspect the element in your browser and find out the different classes.

Or you deactivate the thumbnail titles in the customizer and place the titles in separate text fields under the thumbnails.

[pavloradich]

@felix_rabe thank you for the suggestion but I would prefer to keep them as thumbnails with title and description underneath because this way they scale properly. I just need to know how to center the offset title.

[felix_rabe]

maybe:

 .thumb .title{
 white-space: nowrap;
 transform: translateX(-50%);
 }

Than can move the text to the left by 50 percent of its length. You can adjust this value.

[arminunruh]

very good felix, only thing that is missing is left: 50%;

so it should be:

 .thumb .title{
    white-space: nowrap!important;
    left: 50%!important;
    position: relative!important;
    transform: translateX(-50%)!important;
    display: inline-block!important;
 }

also it needs to be inline-block and position relative for that to work properly