I have created a horizontal scrolling website but for some reason chrome on ipad shrinks the entire layout to show it without enabling horizontal scroll.
I have created a test file to replicate this issue with following code:
<!doctype html>
<html class="no-js" lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Title -->
<title>Testing Horziontal Scroll</title>
<!-- For responsive behavior -->
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0">
<style>
.horizontal{
height: 500px;
width: 4000px;
}
.item{
width: 1000px; background: #f00; float: left; height:100%;
}
.item:nth-child(2){
background: #0f0;
}
.item:nth-child(3){
background: #00f;
}
</style>
</head>
<body>
<div class="horizontal">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
I tried removing view port meta tag and it fixed the issue but that created issues on other devices.
You could try adding the following to your CSS:
body {
overflow-y:scroll;
}
This will force the overflow to the left and right to be set to being scrolled.
Hope this helps!
Related
This question already has an answer here:
Why does 'overflow: auto' clear floats? And why are clear floats needed?
(1 answer)
Closed 1 year ago.
Recently I started learning css and while I was learning about float I didn't understand how overflow:hidden; Works with the float
I tried to go to w3schools and mdn
But I still don't understand how it works
.parent{
background-color: red;
padding: 10px;
overflow: hidden;
}
.parent div{
background-color: #eee;
float: left;
}
<!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="css/float.css">
<title>Document</title>
</head>
<body>
<div class="parent">
<div>product one</div>
<div>product one</div>
<div>product one</div>
<div>product one</div>
</div>
<p>this is a paragraph</p>
</body>
</html>
overflow: hidden; is a css property which prevent scrollbars from appearing, even if its necessary...
I will give an example using floats to show how it works,
HTML
<div class='container'>
<div id="div1"></div>
<div id="div2"></div>
</div>
CSS
/* *{
overflow:hidden;
} */
.container{
width:108vw;
height:100vh;
background:red;
}
#div1{
width: 600px;
height: 400px;
background: blue;
float: left;
}
#div2{
width: 400px;
height: 600px;
background: green;
float: right;
}
here, I purposely made the container larger than the screen size(which, obviously is 100vh, 100vw), so the scrollbars appear. Now i have two divs with floats and different colors so you can identify them. To actually see those divs, one must scroll down and towards the right;
Here is the link to the pen i made
https://codepen.io/codebyrudra/pen/XWaBOJr
Now, uncomment the
*{
overflow:hidden;
}
now you can see that the scroll bars are gone and you can no longer scroll to see those divs completely.
You can also try this property with display:flex; or display:grid;, it will yield the same result.
Hope this helped :)
overflow: hidden; only has a visible effect if you define width and height for that element and its contents would normally go beyond that width and height:
(widthhas a default of 100%, so it doesn't necessarily have to be defined in all situations)
.parent{
background-color: red;
padding: 10px;
overflow: hidden;
width: 200px;
height: 15px;
}
.parent div{
background-color: #eee;
float: left;
}
<!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="css/float.css">
<title>Document</title>
</head>
<body>
<div class="parent">
<div>product one</div>
<div>product one</div>
<div>product one</div>
<div>product one</div>
</div>
<p>this is a paragraph</p>
</body>
</html>
I wanted to practice some CSS, so I created some divs in vscode to start playing around but when I go on live server, nothing appears.
Here is my code:*
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="" width="", initial-scale="1.0">
<title>Document</title>
<style>
.container{
background: #81072b;
width: 100%;
height: 100%;
}
.child{
background: #05A82C;
width: 50%;
height: 50%;
}
</style>
</head>
<body>
<div class="container">
<div class="child"></div>
</div>
</body>
</html>
When using width/height in percentage % then you need to add content inside div then it will display your css. You code is fine. Check the demo
This question already has answers here:
Is it wrong to change a block element to inline with CSS if it contains another block element?
(9 answers)
Closed 2 years ago.
I'm tryng to show two inline div, each div is wrapping 2 block divs, my question here is
Why the inline divs arent showing the background, even when they have children, until I type something inside, the background is showing but only in the text, no wraping the children.
Here's my code:
.container{
background-color: rgb(37, 220, 20);
height: 100px;
width: 100px;
/* display:block; */
}
.item{
background-color: coral;
margin: 10px;
height: 25px;
width: 25px;
}
.block{
display: inline;
}
<!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 rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container block" style="background-color: crimson">
<div class="item"></div>
<div class="item"></div>
</div>
<div
class="container block"
style="background-color: rgb(20, 180, 220)"
>
<div class="item"></div>
<div class="item"></div>
showing BG
</div>
</body>
</html>
Inline elements have no height or width as well as som other limitations on stying- you should make them inline-block to achieve your desired effect.
In the following snippet - I smily changed the styling to inline-block and it works as I believe you want it to - I was also able to remove the text from the second block.
Also - there does not seem to be a "flex-container" class on any of the elements.
.flex-container{
background-color: rgb(37, 220, 20);
height: 100px;
width: 100px;
/* display:block; */
}
.item{
background-color: coral;
margin: 10px;
height: 25px;
width: 25px;
}
.block{
display: inline-block; /* I changed this to inline block */
}
<!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 rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container block" style="background-color: crimson">
<div class="item"></div>
<div class="item"></div>
</div>
<div
class="container block"
style="background-color: rgb(20, 180, 220)"
>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
when i was trying to make a responsive navbar i ran into this width problem
so here's the HTML code
body{
margin: 0;
}
.nav{
background-color: lightgreen;
height: 40px;
width: 100%;
}
.footer{
background-color: #333;
font-size: 18px;
padding: 20px;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="nav"></div>
<div class="footer">
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
</div>
</body>
</html>
i it all worked fine until i go to the "developer tools" and viewed it on android, even though i make width 100% it still didn't reach the other end when i make it smaller
The problem that you are having is the footer. By default padding is added to the element's overall width and height. So when you give footer a width of 100% with 20px padding the width actually becomes 100%+20px+20px.
This can be easily overcome by adding box-sizing:border-box to your footer class. Or many people just set it to every element like *{box-sizing:border-box} so you won't have that problem again.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
border-box tells the browser to account for any border and padding in
the values you specify for an element's width and height. If you set
an element's width to 100 pixels, that 100 pixels will include any
border or padding you added, and the content box will shrink to absorb
that extra width. This typically makes it much easier to size
elements.
body{
margin: 0;
}
.nav{
background-color: lightgreen;
height: 40px;
width: 100%;
}
.footer{
background-color: #333;
font-size: 18px;
padding: 20px;
width: 100%;
box-sizing:border-box
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="nav"></div>
<div class="footer">
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
</div>
</body>
</html>
I have a menu with a fixed position
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>My App</title>
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style>
body {
margin: 0;
}
.parent {
position: relative;
max-height: 100vh;
padding-top: 3rem;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.menu {
position: fixed;
top: 0;
width: 100%;
background: pink;
text-align: center;
height: 3rem;
}
</style>
</head>
<body>
<div class="parent">
<nav class="menu">Menu</nav>
<div style="height:100vh; background: yellow">1</div>
<div style="height:100vh; background: green">2</div>
<div style="height:100vh; background: red">3</div>
<div>
</body>
</html>
http://jsbin.com/xojarekano
On mobile safari, you can scroll and the menu stick to the top, as expected.
But if you add to home screen, and then launch the site from there, when you scroll, the menu get drifted, disappears then appear again. I have tried adding translateZ(1px) into the menu class but the problem still exists.
Why does this behave differently when it's launched from home screen as opposed to inside mobile safari. How can be this fixed?