[Support request] Mobile responsiveness

[Jessica]

Hi,

Hope you’re well! My website looks good on desktop but crazy on mobile. I’m sure it’s a simple fix and I’m doing something silly but was hoping someone could help please. My site is http://www.barcelonasbestbits.com

Jess

[Fernando]

Hi Jessica,

One of the things I noticed is the “Barcelona’s Best Bits” section which becomes very narrow as the screen gets smaller. Your structure needs a different approach.

Instead of adding paddings which you have done for the Containers in the columns of the Grid, why not place the entire Grid Block inside a Container Block, then, set the inner container to Contained Width? Then, set the container widths to your preference. Example: https://share.getcloudapp.com/wbuvoJ79

Reference: https://docs.generateblocks.com/article/container-overview/#inner-container

[Jessica]

That’s great thank you 🙂 Is there a way I can increase the space between the 2 paragraphs without changing the alignment of the text? They just feel a bit close together at the moment

Also, am I able to have the H2 heading “A local’s guide…” centre aligned on desktop but lef-aligned on mobile?

The menu looks really spaced out on mobile, how do I reduce that please?

Thank you,

Jess

[David]

Hi there,

1. Select the Grid Block and in it settings you can add a Horizontal gap.

2. Select the Headline Block, and switch to Mobile preview. The Blocks Toolbar will move up to the Top bar, there you can change the Text Alignment and it will apply to just to mobile

[Author]

Posts