Desktop layout display on IPad, but alignment runs

Hi friends,

Recently, I have done a login page. There is a container in a section. The following is the settings for this container and the section:

Section settings:
W: 1903px* (default)
H: 756px*
Responsive behavior: Fit to screen

Container Settings:
Width: 25%
Height: Auto
Min W: None
Min H: 240px
Max W: None
Max H: None
Position type: Default
Margin (bottom): 10%
Element auto docks: unchecked

There are two fields (username and password) and a login button in the container with the settings as follows:

Username field:
Width: 90%
Height: Auto
Min W: None
Min H: 40px
Max W: None
Max H: None
Scale size proportionally: unchecked
Position type: Default
Margin (left): 10%
Margin (right): 10%
Margin (top): 16%
Margin (bottom): 0%
Element auto docks: unchecked

Password field:
Width: 90%
Height: Auto
Min W: None
Min H: 40px
Max W: None
Max H: None
Scale size proportionally: unchecked
Position type: Default
Margin (left): 10%
Margin (right): 10%
Margin (top): 27%
Margin (bottom): 0%
Element auto docks: unchecked

Login button:
Width: 90%
Height: Auto
Min W: None
Min H: 42px
Max W: None
Max H: None
Scale size proportionally: unchecked
Position type: Default
Margin (left): 0%
Margin (right): 5%
Margin (top): 38%
Margin (bottom): 0%
Element auto docks: unchecked

But when my user access the login page with his iPad, the login page layout alignment is not display properly. Please refer to image as follows:

I just like to seek for some advice that: Is mt settings correct? If I missing out any important settings?

Thanks in advance for you help!

Product:
I am using Wix Studio.

stack the elements to ensure they can be spaced correctly

Thanks a lot @Dan_Suhr. I will try it.