I’m making a new website (andreasvdesigns.webflow.io) and at the moment I’m trying to make it responsive for tablet and mobile. However, the full page menu only seems to work on the desktop, as the sizes doesn’t work on other devices even though it looks good on the Webflow preview but not live.
I think I’ve made the contact forms work on desktop, but I still dont know how to make it responsive for the other devices.
As you can see on the first picture you can scroll down on the front page, which shouldn’t happen. The grey picture is the menu which on mobile, which doesnt work at all. It should be centered like the desktop menu.
The footer on the contact forms is made wrong, as I don’t know how to make the section fill out the empty space.
It looks like you’re using pixel units for widths/margin which can be difficult to make a design responsive and I highly recommend watching this basics of responsive design video here.
For your navigation, I’d recommend adjusting your nav menu to display: block, and then styling your menu items with a vh height and vh margins between each of them to get them centered up. I hope that this is helpful, please feel free to reach out to me @Waldo if you’re having any trouble.
It seems like my menu works on all devices now, even though it’s a little buggy when you scroll.
I tried to set the body element to overflow: hidden and it worked, thanks!
I only have one problem right now, which is when you enter the contact-client page. The footer is stuck at the bottom of the screen no matter what, so you can’t see the whole contact form. I want it to be at the bottom of the page, so that you can scroll down to it.
Yeah I made the footer hidden yesterday because I kinda gave up with it.
The website seems to work on desktop and on my Huawei phone, but when I use another (iPhone 6 and Samsung) the front page doesn’t work, as you can scroll down to white space, that shouldn’t be there.
The menu doesn’t work on the other phones too, as the full page menu only shows the first part of the menu with the “Home” shortcut.
The website looks good in your app, but when someone else enters the live website on their phone it doesn’t seem to work properly.
Hi @AndreasV can you please post screenshots, operating system versions and browser versions of the behavior which you’re seeing on those devices?
It sounds like you need to adjust some height and overflow style settings on certain elements but is difficult to tell without screenshots to reference what behavior you’re experiencing.
