cssmobilemobile-safari

Mobile web site stretched

http://demo.dev.rbmleads.com/personalloan/v10/

I made a mobile version of a form for work but can't figure out why it's stretched out like this. It's supposed to look like this:

enter image description here

but instead it looks like this:

enter image description here

I thought it was a stray element in there with a set with but all the elements are set to auto or a %. Any idea?

Solution

  • Make sure you set the meta tag

    <meta name="viewport" width="device-width" />

    this will make your 100% a little closer to 100%

    there are a few other parameters you can set like initial zoom and heights but I think this width will solve your problem

    EDIT: One additional thing you can try is to query width and set the font size

    example of some LESS:

    html,body{
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-size: 16px;

    @media only screen and (max-width : 600px) {
        font-size: 11px;
    }
}

    Basically this sets your base font to 16px on a phone and 11px on a desktop.