Cannot seem to get it right on small screens?

[skinpores]

Still noobs here and working on our first website.

On mobile portrait screen, things start to look funny once you start fiddling with the width of the screen. For instance, we had Text Span 10 set to ‘auto’ width, which didn’t adjust well (or at all) when we start shrinking the width of the mobile portrait screen. Sometimes we end up having 1 word on a line.

Likewise, we tried using different units - px, % etc. Not much improvement. We tried using a smaller font, but even then things are never quite right.

We don’t know if there’s a way for the text to auto adjust proportionally the width of the mobile portrait screen changes?

And in general, how do you actually get headings and tag-lines to look more or less the same as the desktop version (or at least will adjust nicely without having 1 word on its own line) on screens less than 320px?

Thanks in advance.

---

Here is my site Read-Only: LINK

[Jonathan_Holden]

Hey there, pro tip… don’t use the container element … use a standard Div, and give it a name (Wrapper) and set that to (for example) 90% width. Then set the margin left and right to auto.

Don’t set a width for the Text Span 10 (probably should be a text box or paragraph). Leave it as auto.

Also, you have a different Body page here… you shouldn’t really change the body page.

ALso, you could set the Text height to - (this helps keep the space between lines the same across the site)

[Jonathan_Holden]

Here’s a vid of me doing that

Webflow - Work in progress.webm

[skinpores]

You’re amazing!! Thanks for answering to our post and for taking the time to do the video Makes it so much easier

[Jonathan_Holden]

Not a problem! It wasn’t so long ago that I was struggling with all this too.

Looking forward to your next problem! (but in a new post!)