▼
Streaming live at 10am (PST)

Password protection on mobile device adds white space as soon as you try to enter a password

Design help General
#1

Hey guys, I’m having issues with the login form for a password protected website:

The responsive elements all work totally fine until you try to enter something in the password field on a mobile device - then suddenly a white space appears underneath the login and you’re able to scroll to the left and right from the content where white space is added.

I found some info on avoiding negative margins and overflow of elements and tried rearranging the elements without successfully getting rid of the white space on mobile devices, has anyone got another idea or direction to pinpoint?

Kind regards from Kölle

read-only link

live demo

#2

. by now I think it has got something to do with the utility page wrap above the login elements, stil I just can’t seem to figure out where the white space is coming from on mobile devices

#3

Hello @Noah_Hazem,

That is a cool intro you have. The problem with the space in mobile comes from the 138vw padding you have on your utility page wrap. If you set it to zero the space area goes away, but so does your utility page wrapper. I think you have to use a different layout, maybe use absolute positioning, since you have the background video element. See if you can make it work by moving some things around from your current layout without the 138vw padding, maybe work your way down from the desktop breakpoint. Let me know how it goes.

#4

Hey @Pablo_Cortes ,

first of all thank you so much for your quick response!

I changed the positioning of all elements as you mentioned, whereas it seems like the utility page form element itself has to be positioned as fixed as it’s not visible with any other positioning attribute.

Still the white space occurs as soon as I hit the password form on a mobile device.

Kind regards

Read-only link

live demo

#5

Hello @Noah_Hazem, did you fix it? because I can’t see any white space on the designer preview or in the live site. On my iphone X it looks fine, no white space, on chrome’s responsive breakpoints I’ve seen no white lines either. It looks good man. I wish I was in Germany to go to the Rave Cave. Let me know if you need more help testing. Take care.

#6

@Pablo_Cortes Cheers! Will let you know as soon as we can have a drink there :smiley:

I think it didn’t quite solve my problem, as you still get the additional white space as soon as you hit the password form on a mobile device.

I will try a couple of other element positioning attributes as I think you already pinpointed me towards the right direction! Will let you know If there’s any progress.

1 Like