CODEWITHSUNDEEP
cssmobilewebmobile-safari
Philll_t
Philll_t

Reputation: 4437

Mobile website 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? Thanks.

Upvotes: 0

Views: 170

Answers (3)

Armin
Armin

Reputation: 194

Maybe it is just the resolution try Ctrl + Shift + M in Firefox. Also set <meta name="viewport" content="width=device-width, initial-scale=1.0"> and play with the scale.

Your sandbox is not reachable, which makes it hard to find the issue.

Upvotes: 1

Dan But
Dan But

Reputation: 658

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.

Upvotes: 2

fabiofl
fabiofl

Reputation: 305

Are you declaring the viewport meta tag?

Add this to your <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

If you need to disable zooming:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Upvotes: 3

Related Questions