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.
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.
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.