[Resolved] Mobile responsiveness issues?

[ammgbr]

Hi,

My hero image (especially the alphabet within it) and the content (the definitions displayed under each term) are partially seen on mobile.
I have tried changing the content to no avail.
I fear I might have set up things in a way that causes issues.
If there is anything I can change or review I would be most grateful for any input.

[Leo]

Hi there,

Not sure if I fully understand.

The current buttons are wrapped in a container which is set to inline-flex and everything is behaving as it’s supposed to be:
https://docs.generateblocks.com/article/layout-options-overview/#inline-flex

Maybe you would want to wrap it on mobile only? or maybe another flex option on mobile only?

Worth playing around to see what works best for you.

[ammgbr]

Hi Leo, Thank you for your reply.

On desktop it works as expected.
On mobile you can’t see part of the content.

For example, within the hero image, there is the alphabet that is horizontally cut short beyond letter D. If it didn’t fit I would expect the remainder to appear on a new line.

Or within the main content, eg the content under the letter A , sentences are partially visible. All sentences are cut off short horizontally and not continuing on a new line.

Cache has been cleared on server side, cloudflare and mobile device.

I expected the current container set up as it is to have been mobile responsive?

[Leo]

The Container block is NOT responsive by default – it uses whatever settings you’ve chosen (in this case inline-flex) and it doesn’t change the setting unless you’ve chosen something different for mobile only:
https://docs.generateblocks.com/article/responsive-controls/

It’s up to you to select the settings to achieve the desired mobile layout.

[ammgbr]

Thank you Leo for clarifying this, apologies for the confusion

[Leo]

No problem 🙂

[Author]

Posts