Streaming live at 10am (PST)

Help with going from desktop to mobile view


#1

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:
http://tympanus.net/Development/SidebarTransitions/

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.


#2

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


#3

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


#4

@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


#5

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


#6