Help with going from desktop to mobile view

Hey all,
I build out my site and all is good on desktop and tablet.
Now when viewing on mobile, the site really breaks down. Here is the link
within webflow:

Sections and containers are overlapping and it even has unseen content
to the right, which is creating a side scroll bar.

Are there any tips/pointers that would help me make the mobile view layout
look better?

Thanks.

Hi @fnd , looks like you pasted the wrong link to your site, can you check that ? Cheers :smile:

my bad! I guess that was still in my clip board…
https://webflow.com/design/in-my-lifetime?preview=e189d5ad8972b2565cd04cfa092f228d

@fnd if I can take one thing from your site it might be a bio part. Not sure if I pointed it right. Hope it is.

Here is yours; that because it’s all in columns I see it has no chance to set their width, forced them to stay cascade instead side-by-side.

Now with some new elements structured, here is the after result

And here is the new elements structure in navigator

See I used same bio space container, but for short I will note only elements that has properties changed from its default so you can set it.

  1. bio-image: width:30%, float:left, Typography: text center.
  2. Button: width:100%

or this after result

Element properties to set:

  1. bio-desc: width:70%, float:left

Hope it helps.

Cheers

1 Like

hey @pasti​wibawa that’s wicked, thanks for pointing that out. Gonna implement that, nice solution.

1 Like