Avoid Horizontally Scroll using Grids

Hi,

I have been starting experimenting with the new Grid feature, however, I have some difficulties with avoiding horizontally scroll on Tablet and Landscape Mobile.

https://anders-skaarups-fresh-project.webflow.io/
https://webflow.com/design/anders-skaarups-fresh-project
https://preview.webflow.com/preview/anders-skaarups-fresh-project?utm_source=anders-skaarups-fresh-project&preview=3ec647ce35ebcf194a087776eea8a2e1

I have added following in the custom code to the heading-1 and heading-2

.heading-2 { overflow-wrap: break-word; word-wrap: break-word; word-break:break-all; white-space: nowrap; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } .heading-1 { overflow-wrap: break-word; word-wrap: break-word; word-break:break-all; white-space: nowrap; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; }

Below also screenshots when I edit the “heading-1” in text length how it appears.

What to do? Thanks!

Best,
Anders


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Your layout is quite simple. Using grid for it is largely overcomplicating it. The cases where you need grid for a layout are quite rare, actually. It’s for when you want irregular grids and control the content across devices in a way that’s different from the flow of elements.

Here you should use sections and Columns maybe, or justs sections with divs and flexbox.

1 Like

Hi Vincent.

Thanks for your reply.

I will proceed with your approach.

Best,
Anders

Let me do a quick breakdown of your layout and point you in the right direction. Be back in a few mn.

https://v.usetapes.com/2rROFVxCRf

and

https://v.usetapes.com/VKJAHm8GOt

Hi Vincent,

Thank you so much! Really appreciated that!

Best,
Anders