Streaming live at 10am (PST)

Avoid Horizontally Scroll using Grids


#1

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://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)


#2

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.


#3

Hi Vincent.

Thanks for your reply.

I will proceed with your approach.

Best,
Anders


#4

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


#5

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

and

https://v.usetapes.com/VKJAHm8GOt


#6

Hi Vincent,

Thank you so much! Really appreciated that!

Best,
Anders