Mobile website stretched
Question
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:
but instead it looks like this:
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.
3 answers
solution1
3 2014-01-17 17:43:31
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">
solution2
2 ACCPTED 2014-01-17 17:39:00
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.
solution3
1 2014-01-17 17:47:07
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.