Below is the html code.
<html>
<head>
<style type="text/css">
.my {
border: 2px solid;
width: 414px;
height: 500px;
}
.right {
text-align: right
}
</style>
</head>
<body>
<h2>this is the ...</h2>
<div class="my">abc</div>
<div class="right">this is the right</div>
</body>
</html>
You can see the 414 pixel div is there
I know the devicePixelRatio is 3, so the actual pixel of width is about 414 * 3 pixel. But when I set width to 414 pixel in css, why it occupy about 2/5 of the width? How does the css pixel map to the actual pixel?
Another attached.
Why I need to set 960px to fill the width of iphone 6plus?
You have to use viewport metatag to control the layout on mobile devices.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
For more help on viewport read this Using the viewport meta tag to control layout on mobile browsers
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.my {
border: 2px solid;
width: 414px;
height: 500px;
}
.right {
text-align: right
}
</style>
</head>
<body>
<h2>this is the ...</h2>
<div class="my">abc</div>
<div class="right">this is the right</div>
</body>
</html>
As far as I understood you need to use viewport meta tag,
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I doubt you are missing this metatag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Related
Why is my text not being centered when i am using the margin to center it(IT WORKS WHEN I USE - text-align : center) :
here is the code and the screenshot :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Angad's website</title>
<link rel="stylesheet" href="/Users/angadsinghbedi/Desktop/Web_Development/CSS-MY SITE/css/styles.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<img src="/Users/angadsinghbedi/Desktop/Web_Development/CSS-MY SITE/images/cloud.png" alt="cloud-image">
<h1>I'm Angad</h1>
<p>a student </p>
<img src="/Users/angadsinghbedi/Desktop/Web_Development/CSS-MY SITE/images/cloud.png" alt="cloud-image">
<img src="/Users/angadsinghbedi/Desktop/Web_Development/CSS-MY SITE/images/mountain.png" alt="mountain-image">
</body>
</html>
CSS TO THIS :
h1{
background-color: #ffe3fe;
margin: 0 auto;
}
RESULT :
You need to set a width as well. In the browser's mind, this is already centered. Here is an example:
h1{
background-color: #ffe3fe;
margin: auto;
width: 8em;
}
I have a simple tag with a banner and a border at the bottom. How can I stop sliding these two elements on zooming? I was looking for a way to get the two elements intact on zoom in and out. Even after a few hours of search, i couldn't get the desired output. I tried this and one more post which says to change from px to em.
My html tag:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<div id="header">
<img class="logo" src="./style/logo.jpg" width= 895 height= 160">
</div>
<div id="container-border">
</div>
</body>
css:
#header
{ padding:0 20px;
display:block;
margin:0 auto;
background: #D6D6D6 url(background.jpg) repeat-x;
height: 205px;
width: 1500px;
position: center;
}
#container-border {
width: 1538px;
height:900px;
margin-left:260px;
border-color: black;
border-width: 1px;
border-style: solid;
}
You first need to wrap the content in a containing DIV
HTML
<div class="site-content">
<div id="header">
<img class="logo" src="./style/logo.jpg" width= 895 height="160">
</div>
<div id="container-border">
</div>
</div>
Note the new DIV .site-content. This is where you would center the website content and control the website contents width.
Here's my codepen: https://codepen.io/arlcode/pen/aRpWZo
I would also recommend not using static width/height for mobile dynamic purpose. You're also going to want to use classes more then ID's because ID's are specific but classes allow you to manipulate multiple DIVs at once.
Bootstrap (using version v3.3.7) is adding 30px extra left/right padding to my browser padding and so adding a scrollbar when I use a fluid container. Normal bootstrap container is fine.
[edit]If I remove the bootstrap js file, then I do not get the padding issue.
I have read up on this and all the problems seem to step from from older versions where the following was required:
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
But this is exactly what my css says.
I have been able to 'fix' it by removing the same padding left/right that is also added to 'col-xs-12' css. But why, This is all I am doing?
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="../../css/bootstrap.css" >
<link rel="stylesheet" href="../../patientApp/css/bootstrap-theme.css" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
layout test
<div class="container-fluid">
<div class="row">
<DIV class="col-xs-12">
<span title="">TEST</span>
</div>
</div>
</div>
</body>
</html>
If I add multiple columns to add up to 12, the same thing happens.
thanks.
Simple HTML:
<!DOCTYPE html>
<html style="font-size: 100px;">
<head>
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
<style>
p{
font-size: 0.2rem;
}
</style>
</head>
<body>
<p>doindex.doindex..doindex.doindex..doindex.doindex..doindex.doindex..doindex.doindex..doindex.doindex..doindex.doindex.fsadfa1234</p>
</body>
</html>
chrome calc 0.2rem to 33.2px.
Console screenshot:
I'm trying to follow a Bootstrap tutorial but the first div I'm creating, that should be spanning the entire width of my browser/device, seems to be limited at ~1000 pixels. Any ideas as to why this is?
Here's my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testing the Bootstrap 3.0 Grid System</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style>
.col-xs-12 {
height: 100px;
background-color: blue;
color:white;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">.col-xs-12</div>
</div>
</div>
</body>
</html>
Thanks in advance for any help.
If you're using the latest 3.1, you can use the container-fluid class instead of container like this..
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">.col-xs-12</div>
</div>
</div>
3.1 full width: http://www.bootply.com/116382
For Bootstrap 3.0.x you'd need to use a custom container like this...
.container-full {
margin: 0 auto;
width: 100%;
}
3.0 full width: http://www.bootply.com/107715
The container class has a width specified depending on the media query. Your content is within this div so its width is based upon it.
You can see this in the dev tools in all major browsers, find that element and view the CSS styles/properties.