Grid text goes outside of screen width

[Sandberg]

Hi,

We have headings in a grid on our corporate website that goes outside of the screen width on mobile. We have the same design on 2 pages and what I dont understand is that it only happens on one of them. https://www.grc-media.com/ is working fine but https://www.grc-media.com/es/ isnt. It’s the exact same template that we took from the design cloud. I first made the english one then copied it and translated it to Spanish.

Do you have any idea what the problem might be?

Thanks a lot for the help!

[marc_a]

Hey Pontus,

Thanks for reaching out!

The reason why the text goes outside the screen width is that the text is so big. If you compare your English and Spanish version, the text in English has a fewer letters than in the Spanish version. To fix your issue, I suggest that you decrease the font size of your text on the mobile.

Hope that helps.

[Sandberg]

Hi Marc,

Sounds great, where exactly do you change this? I can’t seem to find it. It’s a bit messily set up in the template with a lot of headings in the grid so Im not too familiar with the setup.

Thanks!

[tristup]

Hi Pontus,

Glad that it helps. If you click on the Size label it will open the Responsive Options as shown in the screenshot given by my colleague. I would suggest you go through the following article on this.

Responsive Styling | Themeco Docs

Hope it helps.
Thanks

[Sandberg]

Worked! Thanks for the help as awalys.

Br,
Pontus

[tristup]

Hi Pontus,

Glad that it worked.

Thanks