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;"
(learning html/css)
I designed a very simple webpage (with some help) that has a fixed responsive margin around the viewport (screen). The problem is that in mobile browsers, the address bar pushes the page down, so the bottom margin is hidden. I want to prevent the address from hiding, and hopefully, I create a fully fixed image. I was already able to lock zooming with this on the
github repo: enter link description here
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I believe that locking the address bar is possible because Fvckrenderverse has it locked on mobile, I want to do the same.
I tried adding this to the but the problem now is that it crops the margins top/bottom, but the address bar is locked at least. How do I lock it without cropping margins?
<style type="text/css">
html, body {margin: 0; height: 100%; overflow: hidden}
</style>
I've tried this script as well but nothing changed, address still hides on mobile.
I've tried other.
<script>
function scrollWin() {
window.scrollTo(0, 0);
}
</script>
See, on the top/bottom, the margin has been cropped, where it is supposed to had a 20px white margin, like the sides. Here, the address bar is locked as I wish.
So I found the answer, asked it on reddit. You can check the solution here
Basically, you add this to the tag like I had, to lock the address bar:
<script> function scrollWin() { window.scrollTo(0, 0);} </script>
Then in the tag you change:
from:
width: calc(100vw - 40px);
height: calc(100vh - 40px);
...to...
width: calc(100% - 40px);
height: calc(100% - 40px);
(change from vw/vh to %)
Simple answer!
You have this pen here.
https://codepen.io/iwaduarte/pen/mdJvaLj
The thing is you can NOT reproduce the error unless you copy it and test locally in your own browser.
Every time that I alter the type of view (from desktop to mobile) the footer section gets pushed down. It adds an unnecessary: height?
So if you hit the Toggle device toolbar (Chrome) in the Inspection tools you will see that the <footer> gets pushed down.
Why is that happening? I know it is overflowing the X-axis but why is adding a scrollbar while in "mobile mode"?
Is that a bug? How to solve that?
Is that a bug? How to solve that?
It seems to me that the absence of the viewport meta info causes this problem. Since the CSS fixed property makes an element to get positioned relative to the view port, by default the standard mobile device height is taken as reference viewport (e.g. Pixel 2 has 411x731px).---
In order to prevent something like this from happening you should provide the viewport meta info in the head, a la:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
#comment: It is not causing the problem. My local index.html has this
tag.
I think, I found the cause. Looks like you have to set overflow to auto (default is visible) for the html and body. It should work. I just tested on my mobile phone (should have done it before posting my answer first).
Checkout this example, and give me feedback whether and how this works for you:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<style>
.bot-footer {
background-color: #59e01b;;
color: white;
position: fixed;
left: 0;
bottom: 0;
font-size: 3vw
}
html, body {
overflow: auto;
}
</style>
</head>
<body>
<div id="root">
<hr style=" width: 3000px;"/>
<footer class="bot-footer">Like at least </footer>
</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 hope you guys can help me cause I cant seem to wrap my head arroud this. I build a one-page site which works fine, except for one thing, which is the overflow-x:hidden on the tablet viewport (and probably smartphone too, havent tested that yet)
Despite the body having body {overflow-x:hidden;} which works fine within normal browsers on the pc, i am able to move to the side for about 25 pixels or so, cause thats the overflow of my rotated div, that sticks out of the screen, which i wanted to hide.
Is there a way to fix this? I supplied below part of the head and html / css
The viewport meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
The CSS applied to the media queries and they respective elements that overflow
#media only screen and (max-width: 992px){
#skills, #experience {overflow-x:hidden;}
}
#media (max-width: 479px){
body {overflow-x:hidden;}
}
And the regular CSS applied to the html / body tags
body, html {height: 100%;width: 100%;font-family: 'Source Sans Pro',Helvetica,Arial,sans-serif;color: #757575; overflow-x:hidden;}
The id's #skills and #experience have a class called .hoek which is defined as followed and causes the overflow.
.hoek {margin: 0 -50px;
-webkit-transform-origin:left center;
-moz-transform-origin:left center;
-o-transform-origin:left center;
-ms-transform-origin:left center;
margin-top: -175px;
-webkit-transform:rotate(5deg);
-moz-transform:rotate(5deg);
-o-transform:rotate(5deg);
-ms-transform:rotate(5deg);
z-index: 20;
}
I must point out, I think, that the #skills and #experience are sections and not divs. I am not sure if that might be a problem within the code, but I thought not. If there is anymore information that is needed, please let me know, but I thought I had covered the bases here.
I dont know where to begin with a fiddle, so I supply you just the test link of the site: http://www.jellyfishwebdesign.nl/Joost/index.php
Found the answer actually here on Stack overflow:
The browsers on mobile devices ignore the overflow-x:hidden within the body and html tag if <meta name="viewport"> tag is present, thus i created a wrapper in the body tag covering the rest of my content with a overflow-x: hidden in it, solving the problem.
Documentation:
Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers.
The bad thing is that it prevents the use now of a jquery plugin, that scrolls....
Try setting minimum-scale=1 instead of maximum-scale=1.
minimum-scale controls how far out the user can zoom, while maximum-scale controls how far in they can zoom. To prevent viewing of the overflow you need to limit the user's ability to zoom out, not in.
I had this same problem and tried applying body with overflow-x: hidden;, and lots of other answers, but what did work in my Wordpress, was applying a global CSS rule as below.
body, html {
overflow-x: hidden;
}
This eliminates the movement left to right on mobiles.
The HTML part is needed, not just body!
As pointed out by Dorvalla, body and html tags are ignored by smartphones browsers, although not by "big screen" browsers, I solved the issue by using the first child of the page structure, so no need of an aditional wrapper.
e.g. for my WordPress case:
.site {
overflow-x: hidden;
/* Unnecessary IMHO, uncomment next line to force hidden behavior */
/* overflow-x: hidden !important; */
/* Additional tunning proposed by the community */
position: relative;
width: 100%;
}
Try setting minimum-scale=1 instead of maximum-scale=1 or initial-scale=1.
eg.
<meta name="viewport" content="width=device-width, minimum-scale=1.0">
if you applied overflow-x:hidden to the body, you might wanna apply to html too.
body,html {
overflow-x:hidden;
}
My analysis as of September 2021. Tested on Safari and Firefox 37 (iOS 15).
The accepted answer and its SO link are pretty old (2013-2014) and do not seem valid any more.
Also, I find that adding a "wrapping" div on my body is not really elegant and could lead to unexpected behaviour.
The page on which I am working on is pretty simple, there is just one background image that might overflow on the right of the screen for smaller screens.
Applying minimum-scale=1 to the viewport meta tag did not work. This prevents zooming out, but I could still have this ugly scroll on the right.
Applying overflow-x: hidden; on <html> only did not work.
Applying overflow-x: hidden; on <body> only did not work.
Applying overflow-x: hidden; on both <html> & <body> did work.
This can be resolved without needing to include minimum-scale=1. While that property does prevent the user from zooming and scrolling out, it doesn't resolve the issue of the horizontal scrollbar still appearing, regardless of the fact that the user can't use it.
The way I resolved this issue was by having the following viewport.
<meta name="viewport" content="width=device-width, initial-scale=1">
Next, you need to make sure that your html and body elements have the following properties...
html {
...
overflow-x: hidden;
}
body {
...
position: relative;
overflow-x: hidden;
}
These properties should make it so that any type of horizontal overflow doesn't show, nor will the horizontal scrollbar be present. This also allows you to lock page-scroll in case of a modal or some other reason on both mobile and desktop by simply passing overflow: hidden to the html element.
If you are using tailwind css in next js and you are using a function to display or hide the sidemenu then it will works for you.
const toggleCart = () => {
if (ref.current.classList.contains("hidden")) {
ref.current.classList.remove("hidden");
ref.current.classList.add("translate-x-0");
} else if (!ref.current.classList.contains("hidden")) {
ref.current.classList.add("hidden");
}
};
Set the sidebar or your div initially hidden and will works fine in your phone. Don't use translate-x-full. It will cause the overflow in mobile device in my case
I found that applying:
overflow-x: hidden
to the div wrapper inside the body made the scrolling a little jumpy on iOS Safari so therefore just gave it overflow: hidden and left the body as visible. This worked perfect for me in all browsers and devices I needed.
Even though you are creating a parent container to apply the overflow: hidden; , the overflow property will not work on position: absolute;. Because position absolute moves the targeted element out of context with the document structure.
It has to be position: relative;
Had the same kind of problem with a toggle menu for mobile users, put it off screen so it would appear when the user clicked on the menu bar, solved applying overflow-x:hidden to my section tag.