Essential grid overflow

[nblund]

Hi guys,

Please see the essential grids (“blog posts” and “tweets”) at nblund.com/resources. The text overflows the grid/skin as the screen size is reduced. The is also the case on the front page nblund.com. I did activate the ‘no overflow’ option in essential grid - but no luck. What to do?

Thanks

[lely]

Hi There,

One option is to limit the length of the title. Select the title element and reduce 160 length.

Other option is we can add the following custom CSS wherein it will cut the text on certain screen size so you can’t see the overflow:
@media (max-width:980px){ .eg-nbpostsblack-element-1 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } }

Hope this helps.

[nblund]

Hi guys,

Unfortunately that didn’t quite make it. I tried:

.eg-nbpostsblueexcpt-element-1,
.eg-nbtweetsblue-element-1,
.eg-nbpostsblack-element-1,
.eg-nbtweetsblack-element-1 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

and also ‘white-space: pre-line;’ rather than ‘nowrap;’ as suggested. The nowrap solution only shows one line (by nature) (see attached); and preline acts like without the styling above. Any suggestions?

Thanks.

[christopher]

Hi there,

There is no way to prevent that, the title is too long for that small boxes, and the second solution as you already mentioned is only for 1 line.

You need to set the number of the columns properly in responsive sizes to fit things properly.

For example, you can do nothing for this much small boxes:

Please kindly follow this guide to change the column of the grids in proper viewports to make it show one column in cases that the square is too small:

https://www.themepunch.com/faq/variable-columns/

Thank you.