Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
If I open my (GWT) page in a normal browser, everything works fine. The body takes the whole width and the content is nicely centered. But if I try this on a mobile phone, the body does not take the whole width and therefore the content is not centered.
I couldn't find out why it is being displayed like this. Also, adding 100% width to body and html tag does not solve the issue .
Is there a way to get this working nicely on a mobile device?
The page can be reached under: http://www.vegantastic.de/
this was driving me crazy and i just solved it by adding position:fixed to the body
Why is body not full width, even though its set to 100% / vw?
In a strange way it is full width, but the viewport is scaled down automatically by the browser, so it fits in the overflowing content.
To check, if this is the case, type this in the console (1): window.visualViewport.scale
1) edit Sep. 2019: visualViewport: only available on Chrome - sry for late notice
If it returns something like 0.8, then the body size is correct, but the viewport is scaled down.
You can also double tap to toggle between scale 1 and "fit-content-scale" (needs touch simulation like in chrome dev-tools).
How to not overflow body?
See here https://stackoverflow.com/a/14271049/3313410 "Creating a site wrapper div inside the body"
or check, if a certain element has a min-width, that "overrides" its width
or check, if something is rotated, or margins out https://stackoverflow.com/a/45534745/3313410
It might be because of a very long word on your webpage. After using the correct viewport meta tag:
<meta name="viewport" content="initial-scale=1.0, width=device-width">
I tried this out, by placing this text inside a paragraph element, inside some empty HTML document:
<p>Here I have a text, and I am going to use a very long, and not-imaginary word (oh it's real) inside. Without some word-breaking CSS, the result will break the screen on smaller devices: Pseudopseudohypoparathyroidism</p>
What happened when I decreased the screen size without the mobile phone simulator:
And what happened when I decreased the screen size with the mobile phone simulator:
Quite the difference. My tip: use the following CSS attribute:
p {
word-break: break-word;
}
I can see that the problem behind this question was solved, but I just experienced the same issue and the answer here could not applied in my case because of the scroll disabling stated in the comment, and any other style modifications on the body seemed to affect the result.
After experimentation I found out this was caused by an element inside my page which was rotated and its height became an obstacle on mobile, since it was closer the right end of the body.
So I would like to add this answer if someone, like myself, find this question via google:
This problem can be caused by many factors, you may want to investigate if one of your component's width is not becoming a problem on mobile view. There is probably a div too long on your page, or a rotated one which margin got out of the body.
Just add this to your body tag and your problem should be solved:
body {
position: absolute;
}
In my case, body (and html) element returns to normal after removing the properties from display: flex; group. After my investigation, I discovered that every element with an automatically calculated width must be in an element that has height and width and wraps all children going all the way to the body. After adding some overflow:auto; position:relative; to the parent elements, the body scales correctly with display flex nested in display flex.
#import '../../variables.scss';
:host {
overflow: auto; // added this line
}
.top-bar {
display: flex;
flex-direction: row;
padding: 10px;
box-shadow: $shadow;
position: relative;
.search-item {
flex: 1;
margin: 0 1em;
display: flex;
flex-direction: row;
position: relative;
input {
margin: 0;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-right-width: 0px;
flex: 1;
width: 1px;
}
button {
margin: 0;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border: 1px solid #ccc;
border-left-width: 0px;
box-shadow: inset $shadow;
}
}
button.icon-only {
border: none;
background-color: transparent;
}
}
menu looks like this:
before:
after:
I had the same problem. In my case there was a grid element that had many columns and grid-gap set to 50px. It caused html to expand. I think it's a good practice to reduce grid-column-gap on small screens.
Related
Honestly believing I must be the first to encounter this problem after
searching the web for quite a bit, I decided to present this issue to
you.
The issue
The issue I am facing resembles a "blank space" that lives at the bottom of my page. It's only visible on mobile and I haven't been able to replicate the issue on desktop, however going into developer modus on chrome and visiting my website, I can see the problem.
When using the developer mode in chrome and checking all the elements, it becomes apparent that the "blank space" is nothing. It holds no information and it doesn't seem tied to any element.
However, after some digging it was found it the "blank space" only pops up after giving width to an element. And not just a width, but a width that exceeds the view-port.
Something else that caught my attention is that the height of this "blank space" is the same as the view-port height.
What am I trying to accomplish
You might wonder why I am setting a width exceeding the view-port, my reasoning for this is because I am trying to build a mobile(only) website that uses horizontal scrolling as a way to paginate between different content.
My goal is to accomplish this solely using css3 and html, no jQuery, no JavaScript and preferably not any ready-made plugins.
So far the "horizontal scroll" gives me the desired effect apart from the massive amount of white space it gives on the bottom of my page. I'd like to invest my time into trying to "fix" it rather than replacing it.
Recreating the issue
The easiest way to re-create my issue is to start off with a blank html file and give it the following elements:
<div id="wrapper"> ... </div>
And inside the wrapper put:
<div class="content"></div>
<div class="content"></div>
Then in your css file put the following styles:
body {
margin: 0; padding: 0;
}
#wrapper {
width: 200vw;
height: 100vh;
}
.content {
float: left;
width: 100vw;
height: 100vh;
}
And don't forget to include a meta tag in the <head></head> for the view-port:
<meta name="viewport" content="width=device-width, initial-scale=1">
For a live example, please check my JSFiddle.
Edit:
Adding some screenshots of my chrome developer tool to visualize the issue.
See here the actual website content, as you can see all is like intended.
The width is 200vw and height is 100vw.
See here the issue captured as a "blank space" like described in the OP.
Notice that the blank space stretched to twice the height of the height: 100vh as set in the css styling. Width stretched as far as the content, width: 200vw.
Chrome developer tools screen-size in device modus (CTRL - SHIFT - M) is 360x640 (width x height).
The issue is when there is a width > 100vw so a horizontal scroll bar appear and take a height from the page height so a new vertical scroll bar appear and affect the height of the page
Here is the issue
So the solution is to give body a width of 100% then overflow-x:hidden
and then it become
Edit
and here a new screenshot with device dev tools enabled
body{
margin: 0;
padding: 0;
display: block;
width: 100%;
overflow-x: hidden;
}
#wrapper {
width: 200vw;
height: 100vh;
}
.content {
float: left;
width: 100vw;
height: 100vh;
background-color:#eee;
}
<div id="wrapper">
<div class="content"></div>
<div class="content"></div>
</div>
and updated FIDDLE
Have you tried:
body {
margin: 0;
padding: 0;
height:100vh;
overflow-y:none;
}
Your code works great when I tried it out:
http://codepen.io/staypuftman/pen/qZZxRG. Toggle the background elements and you'll see it works just as you want.
The only difference is that I used normalize.css behind the code. Perhaps this gets a code gremlin you might have missed. Normalize is a great way to get rid of some HTML oddities and it's very light weight.
A JSFiddle of it: http://jsfiddle.net/24tL8mkq/3/
I want the red highlighting to continue all the way across the box.
Right now, it's set-up such that:
<div style='width: 500px; overflow: auto; border: 1px solid black; padding-top:-5px;'>
<pre id='pre_1'>
<!-- code box -->
</pre>
</div>
with the relevant css (this is the CSS that I want to extend across the entire div, through the overflow) being:
.bad {
background-color: palevioletred;
width: 100%;
}
I get that I can't use width: 100% as that'll only extend to the right most side of the overflow always, but I can't set a static width as I don't know what the size of the box could be.
I'd really prefer to keep this a HTML/CSS solution if possible just to make this as portable as possible.
Interesting problem. The following works for me in the latest Firefox, Chrome and IE11, though I'd consider this somewhat "experimental" - definitely should be further tested if you need to support a broader range of browsers.
http://jsfiddle.net/24tL8mkq/5/
pre {
display: table;
}
pre > div { display: flex; }
I wish I could tell you why this works, but I don't know. I wasn't able to find another combination that works, however. My guess: setting the pre to display: table makes it so the width will go wider than 100% (500px), as tables will do (when their children are wider than the table). Setting flex on the div children is filling the available space since all the children should be equal width.
I made a website which displays correctly on desktop but on mobile devices I get a large white margin on the right side of the screen. I tried every solution I found so far, meaning the following basically:
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
overflow-y: auto;
}
Tried every combination but the most I could get out of it is that I didnt have the margin but instead a vertical scrolllbar which isnt too good either. Could please someone help me with my issue?
You can see this problem here.
You should set also max-width: 100%;, or try to find element in your html code (using development tools in your browser) which has width property value higher than mobile screen resolution.
I found that the .menu2 class element have negative margin value. Setting this to 0, and changing width of .main element to 100% instead of value in ems solved this problem in my browser.
I have a question for the front-end web development experts out there which is stumping me.
On my page, I have a sidebar which is fixed on the right side of the page, and then a large block of content (fixed-width) that takes up more than the width of the browser window. The problem is, the content on the far right side of the div can't be seen because it's behind the fixed sidebar.
Here is a super stripped down example of my issue in jsFiddle.
EDIT: Here is a more complete example of my issue.
I thought that simply applying padding-right: "width of sidebar"px to either the body or to a wrapper div, or applying margin-right: "width of sidebar"px to the content div should fix the issue, but neither works. I don't want to resort to putting in a filler div unless there is no way to accomplish this effect with CSS.
I did a search for the issue on google and so, but all I found were questions about how to remove whitespace from the right side, which is the opposite of what I want to do.
Thanks to anyone who can solve this stumper!
EDIT: After seeing a multiple questions about why I can't simply set things up differently, I thought I'd clarify by showing a more in-depth example of what I'm trying to accomplish. You can see that here. The columns in the table must be fixed-width, and I want to be able to see the full contents of the last column. Hope that helps clarify things!
I know you already came up with a jquery solution, but I think you could get by with a simple css rule:
tr td:last-child { padding-right: 100px; }
It just sets padding on the last td in each tr, equal to the fixed right sidebar width.
I made the wrapper position absolute with a left 0 and right of 110px, which you also can put on the content div instead of the wrapper. Just to give you a hint... See http://jsfiddle.net/aHKU5/98/
#wrapper {
position: absolute;
left: 0px; right:110px;
border: 1px solid red;
}
Edit
I also create a version with a max-width that makes sure the content will never exceed 900px, but if there is less room it will respect the sidebar as well... http://jsfiddle.net/aHKU5/102/
#wrapper {
position: absolute;
left: 0px;
max-width: 900px;
margin-right: 110px;
border: 1px solid red;
}
I know you wanted fixed width, but this works how you want I believe without worrying about user screen resolution. I just added float:right and width:100%; to the content div and it looks good to me. Try this code:
#content {
border: 1px solid #444;
background: #aaa;
height: 400px;
width: 100%;
float:right;
}
So I figured out a solution to my issue. I simply used jQuery to set the width of the body to the width of the table plus the width of the right sidebar. Worked like a charm.
Here's the code I used if future developers stumble upon this page with the same question:
$('body').css('width', $('table').width() + 150 + 'px');
Where 150 is the width of the sidebar.
I am having a CSS class with the following code. I am trying to put a DIV at a distance of 140px from the top of webpage and to put it in the middle (equal distance from left and right). It is displaying correctly in Firefox and Google Chrome but not displaying correctly in Internet Explorer 8. Can anyone tell me what is the problem with this code? Also can anyone give me some link with browser compatibility guide?
div.main
{
padding: 0px;
width: 980px;
/*height:1350px;*/
/*border: 1px solid red;*/
margin: 0 auto; /*helps in getting the DIV to be in middle i.e. equal distance from left and right*/
overflow: hidden;
margin-top:140px;
}
I find QuirksMode most helpful for browser compatibility info, plus it has some other great info.
The problem, however, depends on more than just the CSS. In order to answer your question, we'll need to see some HTML and the rest of the CSS you've got. And a description of what's incorrect with IE's rendering. Without seeing that, my first suggestion is to make sure you're using a strict DOCTYPE.
Note that centering the DIV will only center it in the containing block (probably BODY), which, wichout an explicit width, will only be as wide as the content and not the full width of the window.
margin-top:140px; is "the problem". To reach your aim use:
padding-top instead of margin-top;
if you cann't - make a wrapper div and apply padding-top to it;
or apply position: relative/absolute; top: 140px; to the div. It is suitable
sometimes.