Essential grid fonts are cut

[educainventions]

I think I have not changed anything related to essential grid, so I guess it is due to some update, but I’m not sure.

If you visit: https://www.edinventa.com/heromask-idiomas/, you can see some of the essential grids with the texts cut (I didn’t happen before):

In addition to reduce the texts length, how could we fix it?

Thanks so much like always for all your help!!!

Carlos

[jade]

Hello Carlos,

Hope you’re well today.

Were you able to get this sorted?

I have just checked your site and the text are showing up fine:

In case you are still getting the issue, kindly try to clear your site and browser cache.

Let us know how it goes.

[educainventions]

Hi. I have tested on different laptops, browsers. I’ve also clear the cache in mine.

It’s not working well. Probably you are seeing it correctly because your screen size is bigger (or smaller).

To check this issue, just zoom in or zoom out. Or resize your browser to be similar to be like a 13" screen.

Thanks

Carlos

[christian]

Hey Carlos,

It’s showing up fine on my end too. I’ve tested in large, medium and small screens including zooming in and out. I’ve also tested other in computers. There might be something in your computer that is causing this. Would you mind testing in other computers and browsers too?

Also what Operating System and browsers are you using. Please also give us the version numbers.

Thanks.

[educainventions]

This is a photo of another computer:

By the way, it’s also al little bit cut on the backend too!

But it’s working perfectly in your end. That’s very weird! I also tried on Facebook in my computer with same problem

[paul.r]

Hi Carlos,

To fix it, you can try adding the code below in Theme Options > CSS

.esg-media-cover-wrapper .eg-awards-es-henry-element-7 {
    padding-top:5px !important;
}

Hope that helps

[educainventions]

Following your idea about playing with CSS instead to trying to fix from the Essential Grid configuration, the following worked for https://www.edinventa.com/heromask-idiomas/:

.eg-awards-es-henry-element-7, .eg-awards-en-henry-element-7 {
    padding:0px !important;
}
.esg-cc.eec{
  top:0px !important;
}

Unfortunately, the top texts and bottom image are too separated because that CSS in the landing page:

[thai]

Hi There,

To reduce the spacing between the text and image, please also add this custom CSS:

.eg-awards-en-henry-element-6 {
    padding: 25px 20px 0 !important;
}

Let us know how it goes!

[educainventions]

So I have change the css code to:

.eg-awards-es-henry-element-7, .eg-awards-en-henry-element-7 {
    padding:0px !important;
}
.esg-cc.eec{
  top:0px !important;
}

.eg-awards-en-henry-element-6 {
    padding: 25px 20px 0 !important;
}

But I don’t see any change in separation between top text and bottom image after doing it: https://www.edinventa.com/en/

[ruenel]

Hello @educainventions,

Please have this code instead:

.eg-awards-en-henry-element-7-a {
    padding-top: 20px !important;
    padding-bottom: 10px !important;
}

We would loved to know if this has work for you. Thank you.

[educainventions]

Hi. After adding that code, https://www.edinventa.com/en/ looks great:

Unfortunately, https://www.edinventa.com/en/heromask-foreign-languages/ do not:

So I have removed that code back

[rad]

Hi @educainventions,

How about this CSS

body:not(.page-id-4226) .eg-awards-en-henry-element-7-a {
    padding-top: 20px !important;
    padding-bottom: 10px !important;
}

Thanks!

[educainventions]

Would it be better to include the CSS code on the page itself instead the Global CSS?

That should fix the issue, and I think would be easier to maintain. Right?

[friech]

Hi There,

That’s right if there are only 2 pages involved.

But the CSS code provided by Rad is easier to maintain if a lot of pages involved. What he did is to apply the CSS code to all pages (with the grid), except the page with an ID of page-id-4226 which is this page.

Cheers!

[educainventions]

Thanks for your suggestions!

[nabeel]

You’re most welcome!