Essential Grid text cutoff

Support
#1

I’ve setup 3 essential grids (one per column with text underneath) on the homepage of my website with text that appeared fine on both laptop and mobile. When I checked on my desktop the word “environmental” was being cutoff. I don’t want to make text smaller so I’m wondering is there a way to set the text to be responsive?

#2

Hi @fersforenv,

To fix this issue, please add this custom CSS under Theme Options > CSS:

@media (min-width: 768px) and (max-width: 1024px){
    .home .eg-madison-fers-element-9 {
        font-size: 14px !important;
        padding: 12px !important;
    }
}

For more information about the media queries, please take a look at this:

Hope it helps :slight_smile:

#3

Thank you @thai, much appreciated. Text on desktop appears fine now. However looking at the SM preview in X theme it appears that text is still cutoff (screenshot below).

#4

Hi @fersforenv,

Can you please share us with your admin account so we can take a closer look?

Thank you.

#5
Summary

This text will be hidden

#6

Another issue I would appreciate help with is changing the font in the essential grid to Montserrat if possible.

#7

Hi @fersforenv,

I couldn’t replicate this issue on my end:

Can you also check the real devices?

To change the font of Essential Grid, please follow this article:

https://www.themepunch.com/faq/adding-my-own-google-fonts/

Hope it helps :slight_smile:

#8

Thanks, I think the issue is resolved. Appreciate your help and advice.

#9

We are delighted to assist you with this.

Cheers!

#10

One last question, thanks for your patience. Is there a way of applying the below CSS to another Essential grid located on http://fers.ie/environmental/. Does removing the .home mean it would apply to all grids.

@media (min-width: 768px) and (max-width: 1024px){
.home .eg-madison-fers-element-9 {
font-size: 14px !important;
padding: 12px !important;
}
}

#11

Hi Ciaran,

Yes, removing .home means it will be applied on all grids. But, it may or may not work depending on the elements of your grid. But if they use the same grid elements and layers then the CSS should still the same too.

Thanks!

#12

Thanks @Rad, much appreciated.

#13

You’re most welcome!

#14

Apologies, but I still seem to have an issue with text of environmental being cutoff on the screen size indicated in screenshot below. I have changed the grid skin, will this require CSS to be changed?

#15

Hello Ciaran,

Please understand that the Grid needs to re initialize to display the grid items properly. Clicking the screen buttons will not guarantee that the grid did initialize which is why, there are times that the text looks like it is cut off. The best way to test the grid is to view the grid in the live view of the page both in the desktop screen, iPad and mobile screen.

Hope this make sense.

#16

Thanks @RueNel, I checked the grid on tablet and in landscape mode the environmental text is cutoff.

#17

Hi Ciaran,

Have you edited the grid? The ID is now changed, so please change the CSS to this too

@media (min-width: 768px) and (max-width: 1024px){
    .home .eg-madison-fers-element-3 {
        font-size: 14px !important;
        padding: 12px !important;
    }
}

Instead of 9, it should be 3.

Thanks!

#18

Excellent, thanks @Rad and apologies for querying this again.

#19

You are most welcome. :slight_smile:

#20

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