Blog topic overlays is too much

Support
#1

So I’m using essential grid to make a blog section on my home page, but the hover-over description is sometimes so long it blocks out the “read more” button

What can I do so that the hover description only shows a short summary with a … instead of the entire blog headline?

I originally had this issue on my home page, but I was able to fix that with some code, not sure.

The page in question is www.ohiocannabis.com/patientreviews

But am trying to create a new Ess. Grid and running into the same problem & I was given this code to use before, but I’ve added it back in and it doesn’t seem to be affecting the Patient Review page?

    .eg-essential-preview-element-1 {
    width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#2

And how to I get arrows or “Next Page” to populate on that grid? I can’t seem to figure it out.

#3

Hello John,

Thanks for writing in!

To resolve your issue, you will need to update your code and use this:

.eg-essential-preview-element-1.esg-transition {
    width: 80%;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: none !important;
}

The Next/Prev Page button can be added in the Gird Settings > Nav-Filter-Sort tab

Hope this helps. Please let us know how it goes.

#4

Ok great, thank you!

Should I delete all of this other code and just use the snippet you provided only?

.eg-essential-preview-element-1 {
white-space: normal !important;
}

.eg-essential-preview-element-1 {
width: 80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

#5

Hey John,

Yes, delete your other codes and use this only:

.eg-essential-preview-element-1.esg-transition {
    width: 80%;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: none !important;
}

We would love to know if this has worked for you. Thank you.

#6

So after playing around with that bit of code, I see now why I went down to just the following:

.eg-essential-preview-element-1.esg-transition {
white-space: normal !important;
}

It gives me a multiple line post title that goes edge to edge and when I only do 3 columns it seems to fit the “Read More” button and the entire post title.

Do you see anything wrong with just using that piece of code?

Adding the .esg-transition to the original code I was using seemed to have given it global updates whereas before it was only on a particular grid.

#7

Hello John,

The white-space property controls how text is handled on the element it is applied to.
Please check this out:

Please feel free to use .eg-essential-preview-element-1 instead of .eg-essential-preview-element-1.esg-transition whichever apply to your site.

Regards.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.