Docs

[MB]

Hi,

We’re having issues setting the length of the post titles so they truncate properly in all viewports.

Essential Grid > Item Skin Editor > Layer Settings > Source > Limit By > ??

We want to replicate the behaviour of our Ethos layout here https://mbguiding.ca/trip-reports/

We want the post titles to truncate automatically when the viewport is smaller not wrap onto another line.

Any ideas?

Thanks, MB

Vancouver Island Hiking Guide

[Rupok]

Hi there,

It might be possible with some CSS with text-overflow: ellipsis; on smaller screens. Can you point us where you have used the grid?

Thanks!

[MB]

Hi Rupok,

On the home page: https://mbguiding.ca/

Ideally I want the titles in grid to ellipse on smaller viewports as they do on blog archive pages https://mbguiding.ca/trip-reports/

Thanks, MB

[Rue Nel]

Hello MB,

Thank you for the clarifications! To resolve your issue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.esg-container .eg-custom-element-1 {
    display: block;
    position: relative;
    z-index: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

You should have something like this: http://prntscr.com/d865c9

Please let us know how it goes.

[MB]

[RESOLVED] Thank you! 😀

[Rue Nel]

No Problem! It’s the least that we can do for you.

[Author]

Posts