Menu
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 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.
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.
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.
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).
309
Using <br> Tag to Create Space in Text or Line Inserting an extra space beneath text or line is pretty easy, it can be achieved using <br> HTML tag. This tag can break any text and create extra space, check out the examples below. BR tag Output: Check out the br tag example below.
We would recommend duplicating the relevant page and delete sections until the white space disappears. When you find the section, try to disable “Stretch Section” under Layout. And make sure you don't have a fixed width on this section or underlying inner sections and elements.
The gap is caused by the margin in your body-wrapper div. margin: -85px auto -60px auto the '-60px' is the culprit (bottom-margin). Reduce or increase it to alter your gap. Save this answer.
To create extra spaces before, after, or in-between your text, use the (non-breaking space) extended HTML character. For example, with the phrasing "extra space" using a double space, we have the following code in our HTML.
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
169
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
