Switch to mobile version button

We are busy with the mobile layout, starting with iPhone.

http://www.newhersystems.nl

When switched to the desktop version on iPhone and/or iPhone simulator (available in XCODE SDK), the "Switch to mobile version" button appears on top of the desktop site. 2 issues:

First issue:
The button text is divided in 2 lines, first line is in the button as expected, second line is below the button. This makes the site start too low in the screen.
How can we fix this? (Buttontext should be completely in the button and the marging between the button and website as low as possible.

Even better: is there a way to place the button at the bottom of the site?

Second issue:
The site has a small offset on the right hand side. It does not fill the screen as it would do without the Switch to mobile version" button. There is a small gap visible (showing background).
How can we fit the screen horizontal to fit the screen width?

Help appreciated

Hi

Can You please send me joomla panel access and tell me if I can put it offline of 15min ? If yes, tell me an hour I can work on that.

Hi

Add this code to iPhone's layout css file:

Code: Select all

div.mobileSwitch {
    padding: 0 30px;
    position: absolute;
    right: 0;
    top: 0;
}

div.mobileSwitch > a {
    text-align: center;
    width: 170px;
}


GREAT.
This is the solution.
Thank you!

Hi

Add this code to iPhone's layout css file:

Code: Select all

div.mobileSwitch {
    padding: 0 30px;
    position: absolute;
    right: 0;
    top: 0;
}

div.mobileSwitch > a {
    text-align: center;
    width: 170px;
}


Hi

No problem. Glad I could help.