I am making a mobile webpage that is the height of the mobile screen but scrolls horizontally through its content.
The problem I am running into is that a div with a fixed position will only scroll horizontally until it reaches the viewport width (I have been testing in chrome with device mode enabled and the iPhone 6 selected, which has a viewport width of 375px while my body element has a width of 1875px).
Here is code showing a simplified version of my problem:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=1875, height=device-height, initial-scale=1">
<style>
body{
width: 1875px;
margin: 0px;
}
div{
width: 200px;
position: fixed;
border: 1px solid black;
}
</style>
</head>
<body>
<div>
<p>This is the test paragraph</p>
</div>
</body>
</html>
I have found similar questions, but most people are asking how to stop a fixed div from scrolling horizontally, whereas I want the fixed div to scroll the entire width of the body element without stopping at the viewport width.
I would put up a fiddle but I cannot replicate the problem without a device simulation like in the chrome dev tools.
Related
body {
margin: 0;
}
div {
box-sizing: border-box;
background-color: red;
width: 100%;
height: 300px;
}
<!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>Text that overflooooooooooooooooooooooooooooooooooooooooooooooooooooooooooows </div>
</body>
</html>
When I inspect the above page with Chrome devtools, turn on Device Toolbar
and set device width to anything below 450 (so that the text overflows)
and device type to Mobile,
there is a gap of space to the right from div.
And as I adjust the width of the device the width of the div is always smaller than the width of the screen. Though the text overflows I expect the div to always be as wide as the screen because the div is a child of the body and it has width: 100%;. Moreover, the devtools say that the div has the same width as the screen.
This issue does not happen on desktop (i.e. if I set device type to Desktop).
What is even weirder is that the devtools say that the div is as wide as the screen.
If I switch to Desktop device type and then back to Mobile than the issue disappears but the page seems zoomed in.
Also when I launch this page on a real mobile device where text still overflows, the issue seems to disappear
but when I zoom out it is still there.
So I assume that when I initially opened the page on the real mobile device, the browser set the zoom value automatically so that the div seems to be as wide as the parent.
What piece of HTML and CSS theory do I miss so that I don't understand the reason behind the issue? Why does it happen? How do I fix the problem?
Try this instead:
div {
box-sizing: border-box;
background-color: red;
width: 100vmax;
height: 300px;
}
I think the problem is the word 'overflooooooooooooooooooooooooooooooooooooooooooooooooooooooooooows' is so long and exceeding the div.
Now, I'm not sure why it's just happen on desktop using mobile mode.
But you can fix it using in your CSS div class the following line
word-break: break-all;
This will force the word break.
Result
Result after add "word-break: break-all;"
I want to have a page that takes the full height and width of the client window. I want to be able to position divs within the page using position=absolute, with a specified transform. They will be playing cards on a table, so they'll have an x, y, and rotation. This all works great, but on mobile, when one of the absolutely positioned elements goes beyond the boundaries of the parent, the browser adds a scrollbar and lets you scroll to the out-of-bounds elements. I've found that I can clip the rendering of the absolutely positioned elements by using clip-path: inset(0) on the parent, but the mobile page still lets you scroll over to the white part beyond the application. Is there some other way to restrict the viewport to just the body so I can keep my full-page, non-scrolling experience in tact? I don't think overflow:hidden works here because of the absolute positioning.
here's an example. https://ddeklotz-static-page.s3.amazonaws.com/example.html
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="app">
<div class="square"/>
</div>
</body>
</html>
body {
margin: 0;
overflow: hidden;
}
.app {
background-color: red;
min-height: 100vh;
clip-path:inset(0);
}
.square {
background-color: blue;
width: 100px;
height: 100px;
position: absolute;
transform: translate(330px, 50px) rotate(20deg);
}
I think I found something that works: I needed to add "user-scalable=0" to my viewport meta tag's content. It looks like before the viewport was zoomed out to show the full extent of the clipped div's bounding region, which isn't what I wanted. Disabling user scaling means we just keep the layout viewport in view, I think.
It looks like I also could have use position:fixed (instead of absolute) to address this, but that would have made the positioning of the divs more difficult (as their parent isn't likely to have the same origin as the viewport).
I'm currently using google chrome browser developer tools to resize my webpage as I create it. I ran a test with a single element which I set the width to 900px. When I resize the page inside the browser using developer tools the div element shrinks with the page as if its responsive. From experience when you have a fixed width the element should "run" off of the screen once the screen decreases pass the elements size and make the window scroll left and right but instead the element starts to become responsive and it doesn't "run" off of the screen.
<!DOCTYPE html>
<html>
<head>
<title>Testing Page Shrinkage</title>
<style>
div{
width: 900px;
background-color: blue;
height: 300px;
}
</style>
</head>
<body>
<div>
1
</div>
</body>
</html>
In this simplified HTML, I have a fixed div that is meant to be the exact width of the window. But there is also a very long word in the content above the div that messes up the layout.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<style>
div {
position: fixed;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
}
</style>
</head>
<body><p>Veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongword</p>
<div><b>0%</b><b>25%</b><b>50%</b><b>75%</b><b>100%</b></div>
</body>
</html>
It looks as if the long word causes the "viewport" to stretch to be wider than the window, so the div (fixed to the viewport) ends up being wider than the window.
Now this only happens on mobile devices, even using Chrome Dev Tools. In Desktop mode, all is fine:
But change to Mobile and the fixed div stretches:
So two questions:
How can I prevent the div from stretching wider than the window?
What is Chrome Dev Tools doing differently when I switch to Mobile view?
1) I've managed to fix all the issues I can create with your code by:
p {
max-width: 100vw;
overflow: hidden;
}
2) Chrome does very strange things with the width of that div as I mess with the css and refresh the page. It does not render at all consistently even with the same css. In fact, I have two tabs open that show the page differently from the same code in the same file, even while refreshing. I think the behavior of a div when smaller than the viewport may be unspecified, and you must use something like my solution to tell Chrome what to do.
this problem is caused by justify-content: space-between. You dont actually set a width, and different things add different amounts of spacing.
If you were to set a width for the div like this: width: 300px, the width wouldn't change on mobile or pc.
I am using this website as an example. http://imgur.com/xyswjQH Here I have a screenshot of the website in fullscreen. However when I resize the page http://imgur.com/ZAKtsR9 you can see that the page almost cuts off elements instead of jumbling them all around. Is there a way I can achive this cutting off affect in html and css only? If you need my code just ask in the comments.
If your goal is to create a fixed width, you can create a wrapper div and set its width to 800px (just as an example) and it's margin to 0 and auto to Center the div if you would like.
If you'd like to make it responsive you can change width to max-width.
<html>
<head>
<style>
.wrapper {
width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="wrapper">
<p>Content here!</p>
</div>
</body>
</html>
You probably didn't need to come here for that question haha. All you need to do is set a width on the body or a div.
Cheers!