Help with Mobile grid responsiveness

Hello guys,

Bit confused here.

Trying to build a home page for a small Hypnotherapy business and am in the middle of checking the responsiveness and fluidity of the page.

Everything looks good until mobile the tighter screen sizes (smaller than iPhone) the ‘Infomation 2X2 grid’ Div block and its children stop acting responsively. Can anybody help me work out why?

Many thanks,

Matt


Here is my site Read-Only: https://preview.webflow.com/preview/transformational-hypnotherapy?utm_medium=preview_link&utm_source=dashboard&utm_content=transformational-hypnotherapy&preview=b9ee57b755da2c0f96bf355ae1a1a52d&mode=preview

Hi @Matthew_Hughes,

It looks like it’s a combination of issues with padding and text size.

In your ‘hero container’, the size of the ‘Hero Heading’ is preventing that block from being more narrow. In the grid you mentioned, the padding on the ‘Button’ class is preventing those buttons from being any more narrow.

I’d recommend bumping down some font sizes and padding at least at the smallest breakpoint.

Let me know if that’s unclear!

Hi Blakelam,

Made perfect sense! Made the changes and it is all working

Many Thanks! :blush:

1 Like