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;"
Related
I have a website with a meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and height:100%; on html and body tags.
When I access this site from Safari (iOS 13.5.1) and do the following:
rotate my device to the landscape mode
then rotate it back to the portrait mode
then a white space appears on the bottom of the screen. This space is not a part of the page html code. It is outside of the html tag.
Minimum reproducible example: https://jsbin.com/cojabiquza
This seems to be related to the Safari behaviour when it hides the address panel and the bottom panel when the device goes to the landscape mode. And when it goes back to the portrait mode the panels are shown again but the browser "forgets" to recalculate something and shows an extra space on the bottom of the page.
Deleting <meta name="viewport"... fixes it. But I can't get rid of it because I have a responsive website.
In other browsers it works well.
Please share your experience if you know how to fix it.
#Jax-p answer
is valid for the bug I described but it causes another problem.
When you use 100vh the content starts to be hidden behind the address bar:
So in my real life app I ended up with a bunch of hacks:
document.addEventListener('orientationchange', () => {
document.documentElement.style.height = `initial`;
setTimeout(() => {
document.documentElement.style.height = `100%`;
setTimeout(() => {
// this line prevents the content
// from hiding behind the address bar
window.scrollTo(0, 1);
}, 500);
}, 500);
});
This hack more or less fixes the problem in iOS Safari 12 and 13
After spending most of the day dealing with this "feature" (again), I created a CSS-only solution for iOS 14.4 on iPad, iPhone, and works normally on all regular browsers. No hacks required. The secret is to use 100vh on the HTML and BODY elements, while using position:fixed on your outermost wrapper element with all of the edges clamped to zero.
Notes: there is a visual artifact when rotating the screen if your BODY background is any different than your wrapper background. This same issue also lets you color the address bar at the top by purposefully giving BODY a different background color (optional).
HTML, BODY {
height: 100%;
width: 100%;
height: 100vh;
width: 100vw;
margin:0;
padding:0;
/* required to prevent rogue scrollbars */
overflow: hidden;
/* cosmetic stuff: */
background-color:#5AE;
}
#wrapper {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
padding:0;
margin:0;
/* if you want the content to scroll normally: */
overflow: auto;
/* cosmetic stuff: */
background-color:#AEA;
border: #6B6 1em solid;
box-sizing:border-box;
}
<html>
<head>
<meta name="viewport" content="height=device-height, initial-scale=1, width=device-width, initial-scale=1" />
</head>
<body>
<div id="wrapper">
Content goes here.
</div>
</body>
</html>
Mobile browsers usually hide their address bar and controls menu while you scroll (or in some cases when you change from portrait to landscape). It might cause some problems while using height: 100%; because sometimes the browser doesn't recalculate percentage values in the right way (it doesn't sum address bar height).
If you want to fill 100% of viewport height you should use height: 100vh; (vh = viewport height). I hope it helps.
As I was also searching for a solution to this problem I found this blog post with the following solution:
window.onresize = function() {
document.body.height = window.innerHeight;
}
window.onresize(); // called to initially set the height.
try this:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
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 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.
Okay I've been banging my head against this one for a few hours, so now it's time to throw it on here and see if anyone can help:
The basic problem is that I've got an SVG on an html page, that's styled to be responsive, and adjust to the width of the browser window. The code works perfectly fine in both IE and Chrome, but on Firefox when the window gets smaller than a certain size, the SVG stops scaling. It will scale up fine. Just to infuriate me, it also appears that when I 'inspect element' in Firefox, and check out the code, the SVG resizes properly to fit into the now smaller viewing area. Here's some screenshots of what I mean:
Here's my code, as basic as it is:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Glynne McReynolds</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<header>
<img src="images/glynne-mcreynolds.svg" alt="Glynne McReynolds" title="Glynne McReynolds">
</header>
</body>
</html>
And the relevant CSS:
header {
max-width: 500px;
text-align: center;
margin: 0px auto;
}
header img {
width: 100%;
height: auto%;
}
I should note that I've also included the development build of modernizr.js, but removing it doesn't make any difference, so I left it out.
Things I've tried:
Removing the width and height declarations from SVG.
Embedding the SVG as an object instead of in an img tag.
Also here's a fiddle with the code, and here's the SVG. Any help would be much appreciated.
Your Firefox screenshot shows that the window is narrower than the browser UI will go (note the cut-off toolbar), so that the viewport is actually ending up wider than the window.
As Robert mentions above, the inability of the UI to shrink past a certain point is often caused by add-ons that add non-flexible elements to the UI....