Text with font-size: 1rem bigger then it should be:
The problem reproduces only with all of this conditions:
ios
horizontal orientation
some text outside of span tag
HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.t5 { font-size: 0.5rem;}
.t6 { font-size: 0.6rem;}
.t7 { font-size: 0.7rem;}
.t8 { font-size: 0.8rem;}
.t9 { font-size: 0.9rem;}
.t10 { font-size: 1.0rem;}
.t11 { font-size: 1.1rem;}
.t12 { font-size: 1.2rem;}
.t13 { font-size: 1.3rem;}
.t14 { font-size: 1.4rem;}
.t15 { font-size: 1.5rem;}
</style>
</head>
<body>
Some text<br />
<span class="t5">Test text 0.5</span><br />
<span class="t6">Test text 0.6</span><br />
<span class="t7">Test text 0.7</span><br />
<span class="t8">Test text 0.8</span><br />
<span class="t9">Test text 0.9</span><br />
<span class="t10">Test text 1.0</span><br />
<span class="t11">Test text 1.1</span><br />
<span class="t12">Test text 1.2</span><br />
<span class="t13">Test text 1.3</span><br />
<span class="t14">Test text 1.4</span><br />
<span class="t15">Test text 1.5</span><br />
</body>
</html>
You might be having this issue where iOS scaling the font to readable size. Refer to this answer where you need to set -webkit-text-size-adjust: none;
Related
I am going to use bootstrap input spinner for my cart web page some old version bootsrap.min.css clashing to align the content correctly ,Can any one help me how to fix it
my code
[<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap-input-spinner</title>
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
h2 {
margin-top: 2rem;
}
h3 {
margin-top: 1rem;
}
/*noinspection CssUnusedSymbol*/
.input-group,
input.test-value-input {
max-width: 250px;
}
.code {
background-color: #f1f2f3;
font-family: Courier, monospace;
}
</style>
</head>
<body>
<section class="container pt-3">
<h3>Simple Integer</h3>
<p>
<input type="number" value="1" min="1" max="10" />
</p>
</section>
<!-- bootstrap needs jQuery -->
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="src/bootstrap-input-spinner.js"></script>
<script>
$("input\[type='number'\]").inputSpinner()
</script>
</body>
</html>][1]
i want output like thisoutput
but am getting this design wrongdesing
I want to generate a PDF from an specified view respecting my actual CSS.
<html>
<head>
<meta charset="utf-8" />
<style>
.justify {
text-align: justify;
text-rendering: geometricPrecision;
}
.center {
text-align: center;
}
body {
font-size: 15px;
white-space: normal;
line-height: 110%;
text-rendering: geometricPrecision;
}
.rightheader {
font-size: 12px;
}
.bigger{
font-size:18px;
}
</style>
<link href="~/Content/uikit.css" rel="stylesheet" />
<link href="~/Content/CartaSates.css" rel="stylesheet" />
<title>
</title>
</head>
<body style="padding:10px;">
<div class="uk-grid" style="margin-top:10px;margin-left:0px !important;">
<div class="uk-width-2-3" style="padding-left:0px;padding-top:0px;">
<img src="~/src/img/logo.png" style="width:200px" />
</div>
<div class="uk-width-1-3 justify" style="padding-left:0px;padding-top:0px;">
<div class="uk-grid">
<div class="uk-width-1-4 justify rightheader" style="padding-left:0px;padding-top:0px;text-align:right">
<strong>Section:</strong><br />
<strong>Office:</strong><br />
<strong>Case:</strong>
</div>
<div class="uk-width-3-4 justify rightheader" style="padding-left:15px;padding-top:0px;">
<span><strong>Foreign Trade Directorate</strong></span><br />
<span><strong>SATES-DCE-UV-2887/2019</strong></span><br />
<span>Request for verification of request.</span>
</div>
</div>
</div>
</div>
</body>
</html>
I already have the my HTML with CSS and it´s showed as intended, logo to the left, and text separated in two minnor divs to the right, but when the PDF is generated, it separate my divs in diferent rows.
I have this .html file and that form, sometimes stretches across all width. Tested with Opera, Firefox and Edge.
.html file:
<!DOCTYPE html>
<head>
<title>LOGIN</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-teal.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<script src="assets/js/index.js"></script>
</head>
<body>
<div class="w3-container">
<h1>Login</h1>
<div class="w3-card-4 form">
<form class="w3-container" action="/login" method="post">
<label for="username">Nome de utilizador</label>
<input class="w3-input" type="text" name="username" placeholder="Nome de utilizador" required id="username">
<label for="password">Password</label>1
<input class="w3-input" type="password" name="password" placeholder="Password" required id="username">
<button class="w3-button" type="submit">Submit</button>
</form>
</div>
</div>
</body>
style.css file:
.big {
background: rgb(150, 150, 150);
width: 100vw;
height: 40vw;
max-height: 400px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.lightgray {
background-color:#c5c5c5!important;
}
.bordergray {
border-color:#6e6e6e!important;
}
.rightalign {
float: right !important;
}
.form {
width: 50vw;
/*margin-left: 2vw;*/
}
body {font-family: "Roboto", sans-serif}
.w3-bar-block .w3-bar-item {
padding: 16px;
font-weight: bold;
}
I can say that it is CSS fault, but I don´t know what or how a rule could be causing this.
This HTML was generated by compiling a .pug file, so I don't have a pretty version of it, feel free to edit this question if you could format the HTML.
EDIT:
Sometimes I get IMG1, others I get IMG2 but only if I open a new tab, why?
IMG1
IMG2:
(I set the background color to black, so its more visible the size of the fields)
Tanks for all the help, but further debugging show me that the file style.css was not being imported, so I changed
<link rel="stylesheet" href="assets/css/style.css">
to
<link rel="stylesheet" href="/assets/css/style.css">
and works all the time, thanks for all the help.
http://i.stack.imgur.com/XZI9d.png
It the above image, I'm trying to get the text to nestle to the left of the menu bar and underneath the header. I've tried both margin and padding, but haven't had any luck. The buttons are all within a separate tag from the text. Code is below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
body
{
background-image: url(Background.gif);
repeat: no-repeat;
background-repeat: no-repeat;
}
div.button
{
width: 220px;
padding:0px, 0px, 0px, 30px;
border:0px;
margin:0px;
}
div.textbox
{
border: 0 px;
margin-top: 300 px;
margin-left: 300 px;
background-color: white;
opactiy: 0.5;
width: 600 px;
}
span
{
width: 600 px;
padding: 90 px, 0 px, 0 px, 250px;
font-family: "Letter Gothic Std Bold";
font-size: 16 pt;
color: #99CCFF;
top: 300px;
left: 300px;
}
</style>
</head>
<body>
<div class = "textbox"><span>
text text text
</span></div>
<div class = "button">
<br>
<br>
<br>
<br>
<img src="DarkLayout_03.gif" width="166" height="66" />
<br>
<br>
<br>
<img src="DarkLayout_06.gif" width="166" height="66" />
<br>
<br>
<br>
<img src="DarkLayout_08.gif" width="166" height="66" />
<br>
<br>
<br>
<a href = "http://notafilmnoirheroine.tumblr.com"><img src="DarkLayout_11.gif" width="166" height="66" />
<br>
<br>
<br>
<img src="DarkLayout_13.gif" width="166" height="66" />
</div>
</body>
</html>
Try using the float left then clear after that.
try something like this
fiddle: http://jsfiddle.net/pWurk/
u have to use float: left
i hope it will help u
I am trying to get 3 icons horizontally aligned with the title of my website. I can't seem to get them within the same margin as my banner.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>
CrossFit Villains
</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
<header>
<span class="title">
CrossFit Villains
</span>
<div id="social">
<img src="fb.png" />
<img src="bird.png" />
<img src="tv.png" />
</div>
<br />
<span>1702 McAra Street, Regina, SK</span>
<br />
<br />
</header>
<div id="banner">
<img src ="banner.jpg" />
</div>
The CSS for the icons:
#social img {
float: right;
width: 70px;
height: 70px;
}
Allright,
First of all be sure to float the a elements instead of the img.
The title should be floated as well, to lign them up correctly.
Also give classes to the other span element in your header so you can apply styles to it. Using <br /> for a new line between elements in HTML is wrong practice.
span.title {
float:left;
}
#social {
float:right;
}
#social a {
float:left;
margin-right:2px; /* just for the spacing of the elements in example */
}
span.address { /* Added this class to the span in the HTML for styling */
float:left;
}
div#banner {
clear:both; /* to replace the <br /> tag */
}
Please see the edited fiddle.
Note: The images weren't linked properly, so I gave the "icons" a red background and your body a black one for readability..
Cheers, Jeroen