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.
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">
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.
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.
Related
I'm trying to link my external css file but it's not running when I'm linking bootstrap.
It gets linked when I comment out the bootstrap link.
body {
background-color: black;
font-size: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
<link href="style.css" type="text/css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
it's not working.
</body>
</html>
you should link bootstrap above your own css files
css is cascading so the lower file is more important and can rewrite the upper ones
use !important if replacing your link tags didn't work
Some items require !important to be placed with them in order to over-ride Bootstrap commands.
I can't honestly remember you whether the background or font-size commands on your body element requires it or not but I've used it below as an example.
Add the same thing to any of your custom CSS commands that don't seem to be working.
body {
background-color: black !important;
font-size: 200px !important;
}
Do anyone know how the css work on mobile? I tried to declare any statement below one by one but no luck.
#font-size-base: 20px;
body {
-webkit-text-size-adjust: 100%;
}
Refer to the image I attached, the font-size was redeclared 2 times from html {10px} to body {16px} and then to p {16px}, but finally it was changed to 28.8px, it is very large on mobile.
In the head, I do declare the meta
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
I can't find which statement change the font-size to 28.8px. Please help.
My actual iPhone was displaying a super-small font-size for part of my web-site.
I found that the following solved it:
<meta name="viewport" content="width=device-width, initial-scale=1">
and
body {
-webkit-text-size-adjust: 100%;
}
I do not understand why these work ... any clues?
Appreciate the help in advance.
I want to use the meta tag and set the css, the font-size is 30px, but when I typing more code in tag p, the font-size became 38.317px in Chrome browser; please tell me why?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
<title>Document</title>
<style>
p{
word-break: break-all;
font-size: 30px;
}
</style>
</head>
<body>
<p>ssssssss</p>
</body>
</html>
I tried your code and both Chrome and Firefox don't change the font-size.
I'm currently working on a Phonegap app and I have the following problem when testing it with Windows Phone 8 (left screenshot below): the application bar is not removed and leaves a big white space.
From various sources I learned that the following meta tag is ignored by WP8:
<meta name="viewport" content="width=device-width, height=device-height">
So you have to define it again using the "ms" pre-tag:
#-ms-viewport {
height: device-height;
width: device-width;
}
But doing so kind of messes up with the scaling of the app. Any idea what is going on?
Here the before after screenshot:
Include this in Index.html,
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
Include this in CSS:
#viewport
{
width:320px;
}
#-ms-viewport {
width:320px;
zoom-user:fixed;
max-zoom:1;
min-zoom:1;
}
and include also this,
body, html {
-ms-overflow-style: none !important;
}
This will solve the issue for now, it worked for me in the same situation..!!
:-)
You can take this code to your css:
* {
zoom:1;
-ms-content-zooming:none;
}
This solved the problem for me.
There is a plugin available for the viewport fix:
http://plugreg.com/plugin/lisovin/cordova-wp8-viewport