Essential grid responsive text not working on mobile view

[Nate_Sheridan]

Hi,

We have created an essential grid created on X Pro and unfortunately on mobile view the titles do not shrink enough and overhang the the boxes. Is there a way this can be fixed in order to have the text boxes work on mobile.

http://www.leapdudley.org

They are available on the link provided above. We have tried CSS provided in older support topics but they did not work.

*CSS that hasn’t worked:

@media (max-width: 797px) {
.esg-grid * {
font-size: 12px !important;
line-height: 12px !important;
padding-left: 0 !important;
text-align: center;
}

.esg-cc .esg-center {
padding: 200px 0;
}
}

Any help would be great, thanks.

[mldarshana]

Hi Nate,

Thanks for writing in! Could you please try adding the following CSS rule into your X -> Theme Options -> CSS area and see if that helps.

@media (max-width:480px) {
  .esg-bottom.eg-attractions-element-0 {
    font-size: 14px !important;
  }
}

Hope that helps.

[Nate_Sheridan]

Hi Darshana,

That worked a treat!

Many thanks,

Nate

[rad]

You’re most welcome Nate!