I can't understand why this input field with margin (at all sides) is not fitting well within that div. I was hoping to see the input with the right margin being shown.
<!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">
<link rel="stylesheet" href="index.css">
<title>CSS Tests</title>
</head>
<body>
<div class="div2">
<input type="Foobar">
</div>
</body>
</html>
body {
margin: 0;
}
.div2 {
width: 100%;
height: 100px;
background-color:indianred;
}
.div2 input {
width: 100%;
margin: 10px;
box-sizing: border-box;
}
Width 100% will set the width to the available space, which in this case is the width of the parent div. Try setting the width to width: calc(100% - 20px); (subtract the margin out).
here is a fiddle link to demonstrate https://jsfiddle.net/2vcokm6x/
The problem is that your width: 100% on the input element does not account for the margin being set. To work around this, you need to subtract 20px (for both the left and right margin) from the width. This can be achieved with calc(), as seen in the following:
body {
margin: 0;
}
.div2 {
width: 100%;
height: 100px;
background-color: indianred;
}
.div2 input {
width: calc(100% - 20px);
margin: 10px;
box-sizing: border-box;
}
<body>
<div class="div2">
<input type="Foobar">
</div>
</body>
Related
There are a lot of similar questions already asked. But I still couldn't figure out the problem.
When viewing the site on mobile there is this unwanted white space, desktop version does not have this problem.
Somehow, the unwanted white space is only present when width of website is greater than viewport(again, only on mobile).
The code is below.
*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
border: 2px dashed rebeccapurple;
}
html,
body {
min-height: 100vh;
width: fit-content;
}
.myDiv {
height: 2000px;
width: 2000px;
border: 2px dashed tomato;
margin: 25px;
}
<!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>
</head>
<body>
<div class="myDiv"></div>
</body>
</html>
Try set .div1 width to 1000px on style
Just now I ran into a weird probelm, I have a fixed element with height:100%. Everything works well until I open Chrome Dev Tool and enter the mobile debug mode.I found in mobile debug mode the fixed element's height will not 100% but a little overflows. After my repeated debugging, I found the sibling's translateX property affects the fixed element's height. And when I tweak the value of translateX property, the height of the fixed element changes too.
I simplified it into the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Fixed Element Height Not 100%</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
body {
overflow: hidden;
}
.a {
transform: translateX(100px);
width: 100%;
height: 200px;
}
.b {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
Could someone tell me that whether this is expected or not ? If this is expected and what causes this ?
Remove 2nd body tag CSS, which is overflow:hidden and add that property to first body tag CSS, following code will help you.
body {
height: 100%;
width: 100%;
overflow: hidden;
}
not sure but try to use vh instead of %
thinks this article would be very interesting aswell for this matter:
https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
Ive tried adding max-height for a container to define its height but have a maximum height to dont exceed limits on higher resolutions.
But using max-height is not working here and I dont know why:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.wrapper {
width: 100%;
padding-bottom: 39.65%;
max-height: 200px;
height: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="wrapper">
<img src="https://image.shutterstock.com/image-vector/sample-red-square-grunge-stamp-260nw-338250266.jpg">
</div>
</body>
</html>
EDIT:
It was not possible to limit the height with this approach so I used height with vw.
.wrapper {
height: 39.65vw;
max-height: 200px;
/* ... */
}
max-height and padding are 2 different properties. The last one won't be limited or affected by the first one.
So, to limit the overall height of the box you need to compute when 200px is the 39.65% of your parent width. Assuming this is the whole viewport that happens when the width is ~504px. At that point with a mediaquery you just set the padding-bottom to 200px;
.wrapper {
width: 100%;
padding-bottom: 39.65%;
height: 0;
box-sizing: border-box;
}
#media all and (min-width: 504px) {
padding-bottom: 200px;
}
i made a new layout but there are sidebands or sidelines(i mean the scroll lines "when too much content" and you have to scroll a lot" but this side line is on the bottom in google chrome) appears at full viewport dont know why does it happens. if i change the wrap width from 100vw to 90 there will be white space on the right side which is not good.
Here is the image:
And here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="wrap">
<div class="el2">header</div>
<div class="el1">left</div>
<div class="el3">
<div class="el5">pakk1</div>
<div class="el6">pakk1</div>
phakk
</div>
<div class="el4">footer</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
.wrap {
width: 100vw;
height: 100vh;
background: grey;
}
.el2 {
width: 100vw;
height: 30vh;
background: #C2FF76;
}
.el1 {
width: 20vw;
height: 70vh;
background: blue;
float:left;
}
.el3 {
float:left;
width: 80vw;
height: 70vh;
background: red;
}
.el4 {
width: 100vw;
height: 13vh;
background: purple;
float:left;
}
.el5 {
width: 30vw;
height: 13vh;
background: green;
float:left;
}
.el6 {
width: 40vw;
height: 13vh;
background: green;
float:right;
}
If you hide the overflow on your top-most container this issue will go away.
.wrap {
overflow: hidden;
}
It's good to figure out why you have an overflow though so you can fix the underlying issue.
https://css-tricks.com/findingfixing-unintended-body-overflow/
Note: you can also only change the overflow for the X and Y axis
https://css-tricks.com/almanac/properties/o/overflow/
Bootstrap uses negative side margins on some elements, that's what causes your problem.
Just change all the vw values to % values (same numeric values) - these consider the "real width" of the parent elements.
https://codepen.io/anon/pen/MopXrq
Actually the problem was some of the boxes height : vh exceeded the limit.
I am trying create a simple single page site that works on mobile. Ideally, I'd like each section of the site to be 100% of the browser height. This is the page:
http://codepen.io/juanp83/pen/EgjBwK
and here's the code:
body, html {
height: 100%;
width: 100%;
}
.section {
height: 100%;
position: relative;
}
.one, .three {
background-color: #666;
}
.two {
background-color: #222;
}
.bottom {
position: absolute;
bottom: 20px;
right: 0px;
left: 0px;
}
p {
color: #fff;
text-align: center;
}
.nav {
position: fixed;
top: 0px;
height: 50px;
width: 100%;
background-color: #fff;
z-index: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<!--nav-->
<div class="nav"></div>
<!--Section1-->
<div class="section one">
<div class ="bottom"><p>By Juan Portillo</p></div>
</div>
<!--Section2-->
<div class="section two">
</div>
<!--Section3-->
<div class="section three">
</div>
</body>
</html>
It works great on my desktop. But I tried it on my iPhone and the first section takes up the entire height of the webpage, not just the height of the browser, so it ends up "hiding" the other sections.
I've done several searches here on stack overflow as well as some other sites but I just can't find a fix. Any help would be greatly appreciated.
.section {
height: 100vh;
}
Set the height to your viewport height using vh.
Reference: https://snook.ca/archives/html_and_css/vm-vh-units
height: 100vh
that should do the trick
vh = viewport height