Trouble Optimizing Visual Layout for Mobile Viewports

Hey everyone! I’d deeply appreciate help optimizing the visual layout of my site for mobile viewports.

  • I’d like the tablet and mobile landscape views to resemble the desktop view.
  • And I’d like the portrait view to look the way it currently does but I’d prefer that the ‘Food’, ‘Drinks’ and ‘Our Story’ elements are properly centered on the page.

Thank you so much!

––––––––––––––––––––––––––––

Here is my site read-only link:

https://preview.webflow.com/preview/components-303d42?utm_medium=preview_link&utm_source=designer&utm_content=components-303d42&preview=e678b06cba0cac2db682e6ef25ade222&pageId=5e48782aa90a2c62133952cf&mode=preview

Hi Matt,

The simplest way to do is using flex-box.

I can see that you have used columns and clear/float-left etc and other settings, absolute positioning etc. These all have an effect on the overall layout, hence, when you try to position one element adjusting padding/margin it doesn’t always maintain responsiveness.

Probably too much to try and explain in words.

If you want a video to show how to create the bottom nav links, I am happy to show how.

Keiran

Yes please - that would be so wonderful and incredibly helpful @knk!

Matt

Hey again @knk (and anyone else willing to help)!

So I followed your advice and used flex box to style the elements on my homepage. However now I’m having a different but related issue.

  • On the mobile portrait and mobile landscape viewports all of my elements are overlapping each other. I’ve included screenshots from my iPhone below.
  • Rather than overlap, I’d like all of the elements to share an equally proportionate amount of space between each other – just as the page appears in Webflow’s designer.

Thank you so much!

––––––––––––––––––––––––––––

Here is my site read-only link:

https://preview.webflow.com/preview/components-303d42?utm_medium=preview_link&utm_source=designer&utm_content=components-303d42&preview=e678b06cba0cac2db682e6ef25ade222&pageId=5e48782aa90a2c62133952cf&mode=preview

Hey Matt,

sorry for the delay in replying.

I see that you have successfully sorted out the visual layout issues.

Do you want to mark this post a ‘Resolved’, as you have created a separate post for the other layout issue you are now experiencing.

I will reply through your new post.

Cheers
Keiran

Thank you so much @knk!