Streaming live at 10am (PST)

Responsive on landscape devices


#1

Hello,

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.

I'm quite new at Webflow, so bare with me.

Preview link: https://preview.webflow.com/preview/andreasvdesigns?preview=d3f383692ac0d4b9d262cce846966a54


Responsive menu and header
Responsive menu and header
#2

I made a little video, check this out:

https://cl.ly/1J3p3n1g0L3B


#3

Thanks, it looks like the contact form is responsive now, even though the footer is messed up in the live version.

(Still need help with the menu and front page)


#4

Can you point the issues that you're experiencing please?


#5

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.


#6

Bump, I still need help with this


#7

Anyone able to help me with this.. ?


#8

@AndreasV if you set your body element to overflow: hidden then you won't be able to scroll up and down.

If you want an element fill the full viewport, set it to a width of 100% and height of 100vh (more information about VH/VW units available here).

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.


#10

Thanks for your reply @Waldo

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.

I appreciate your help.


#11

Not sure if the tag worked when I edited @Waldo


#12

@AndreasV it looks like your footer is set to be hidden within the element settings on Tablet, Mobile Landscape and Portrait viewports:

Here are some quick design changes which you can make to your section_client element to help make your site more responsive:

Hope that this is helpful!


#14

Hi @Waldo

Thanks for your help.

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.


#15

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.

Thanks in advance!


#16

Hi @Waldo

Thanks for helping me out, I appreciate it.

Here's the two different pictures with the menu and landing page.

This is taken from an iPhone 6 on the Safari browser (Operation system: iOS 10.2.1). Same thing happens with my new iPad.

This is taken from my Huawei P9 with Chrome. (App version: 56.0.2924.87. Operation system: Android 6.0.0)

This is taken from the iPhone 6 with Safari.

This is taken from my Huawei P9 again with Google Chrome.

The situation with the iPhone 6 also happens on my other Samsung phone.


#17

Hi @Waldo

It looks like I've fixed the problem for my last post.

However, I'm not sure how to make it responsive for tablet and mobile landscapes.

Here's a picture of how it looks on my Huawei mobile as landscape. This also counts for the menu, where you aren't able to see everything.


#18

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.