Archived topic

Wrong view on mobile phone...

3 replies · Started by Francesco on December 30, 2021

Viewing posts 1–4 of 4

December 30, 2021 at 4:17 am #2063704

Hi there,

many thanks for the work you're doing here.

A client of mine pointed out this problem on mobile phones (Huawei p20, Firefox, 84.1.2, Android10).
However, the problem does not appear on my devices.

Here is the page: https://www.genocideagainstroma.joro.xyz/ausstellungseroffnungen-in-der-ukraine-%d0%bc%d0%b0%d0%b9%d0%b1%d1%83%d1%82%d0%bd%d1%96-%d0%b2%d1%96%d0%b4%d0%ba%d1%80%d0%b8%d1%82%d1%82%d1%8f-%d0%b2%d0%b8%d1%81%d1%82%d0%b0%d0%b2%d0%ba%d0%b8-%d0%b2/

(the URL is ugly, I know, there are Ukrainian letters in it)

And here is a screenshot of the issue.

1) the width of the site gets smaller and buttons get messy -> https://www.dropbox.com/s/amk865nvs5z0xrg/photo_2021-12-30%2010.49.52.jpeg?dl=0

I don't think it depends on the length of the word "Ausstellungseröffnungen".
I have already tried to change it but the issue still occurs (on my customer's device).

Could be the "ugly" URL?

Please help.

Many thanks in advance.

Francesco

December 30, 2021 at 7:26 am #2063843

Hi there,

the issue is with the really long word in the H1 title, it doesn't break to a new line so it overflows the container.

Couple of options:

1. Edit the page and select the H1 Headline - in the settings sidebar change to mobile and edit the Typography and set the font to a smaller size to stop the text overflowing. Setting it to 30px would fix it.

2. Add this CSS to force that word to break to a new line:

.gb-headline-text {
    word-break: break-word;
}

December 30, 2021 at 2:09 pm #2064330

Got it. Many many many thanks.

Francesco

December 31, 2021 at 5:53 am #2064730

You're welcome

This archived topic is closed to new replies.

Start building better websites today.