1

As shown in the screen shot I can not remove the white space at the bottom. I tried some solutions but they are not working. Please let me know if there will be any solution for this problem. http://www.rovedashcam.com/

enter image description here

Mithil Amin
  • 207
  • 1
  • 6
  • 14
  • 10
    It's quite easy, really: `body {background-color: black}`. White space removed. Now we has black space. – tao Feb 18 '17 at 18:07
  • Still Same problem. @AndreiGheorghiu – Mithil Amin Feb 18 '17 at 18:08
  • I was joking. Looking into it. – tao Feb 18 '17 at 18:09
  • This is unnecessary space. I want to remove this. – Mithil Amin Feb 18 '17 at 18:09
  • 1
    I don't see any empty space at the bottom of your website link as show on screenshot, is your link correct? – Siva Feb 18 '17 at 18:09
  • Click on the Contact Us header – Mithil Amin Feb 18 '17 at 18:10
  • The bootstrap `section { display:block }` is not helping – mplungjan Feb 18 '17 at 18:11
  • Mithil, if you don't want your question down-voted, you should add a [mvce] of your problem to the question. Otherwise, after you fix the issue, nobody will benefit from the answer, as they won't know if the initial problem was similar. – tao Feb 18 '17 at 18:15
  • Try adding `#header_area { overflow: hidden; }`. Looks like you have overflow from an animation in that element. – Michael Coker Feb 18 '17 at 18:18
  • Does the problem come from the div `www.000webhost.com` in absolute position ? It is kind of stange to see white space like this outside of the html content. I eager to see what the answer is. – Kevin Amiranoff Feb 18 '17 at 18:18
  • Yes, it's a common shared *free* hosting issue, @KevinAmiranoff. But they're badly executed. Easily fixable through CSS. My provided fix should work just fine. (It does in my browser). – tao Feb 18 '17 at 18:20
  • But this is not working in xampp server too. @KevinAmiranoff – Mithil Amin Feb 18 '17 at 18:21
  • @AndreiGheorghiu. If you apply any change to the body, even `background-color:red`, it will fix the issue. But that is after rendering so I would think some js is miscalculating height or something... – Kevin Amiranoff Feb 18 '17 at 18:22
  • In what file are you applying the fixes, Mithil? – tao Feb 18 '17 at 18:24
  • It could be related to this issue : https://github.com/matthieua/WOW/issues/51 as this librairy is being used – Kevin Amiranoff Feb 18 '17 at 18:30
  • I've updated the answer, Mithil. Should do the trick. If not, I will provide a third option which is working even if they are using scripts to do this. – tao Feb 18 '17 at 18:33
  • If the below answers dont work you should include unminified js files, in order to find the source of the bug. – Kevin Amiranoff Feb 18 '17 at 18:38
  • Only setting a break point in line two of ```wow.min.js``` and continuing the execution will solve the bug. Something somewhere is miscalculating height. – Kevin Amiranoff Feb 18 '17 at 18:39
  • Are you serious? When was setting a js breakpoint a viable solution for fixing websites? :)) What if your browser doesn't have an inspector? You're funny, man. – tao Feb 18 '17 at 18:55
  • 1
    Actually, this question is *off-topic*, because it doesn't have a [mcve]. When the problem will be fixed, other users won't be able to benefit from the fix, because they won't be able to inspect the initial problem and compare with theirs. I'm voting to close this. – tao Feb 18 '17 at 18:57
  • @AndreiGheorghiu. You are right, my point is not solving anything. I am just saying there is a bug in the javascript. lol – Kevin Amiranoff Feb 18 '17 at 19:02

5 Answers5

2

First option:

body { overflow-x: hidden; }

should do the trick.
If it doesn't here are a few probable causes:

  • your're not loading .css correctly
  • ... or your .css file is broken and not parsed (it could also be partially parsed, depening on how it's broken

have you noticed I didn't close my bracket above? That could easily break a CSS file...

Second option:
Add this at inside the <head> tag of your page, just before the closing </head>:

<style>body>script+div[style^="text"]{display:none}html,body {overflow-x:hidden!important}</style>

It will also make the ad from footer get lost.
If this doesn't work, I'm raising an eyebrow. I promise.

Option three

If the above have not worked, remove each of them and place this code just before the end of your </body> ending tag. Before, not after:

<script type="text/javascript">
var css = 'body{overflow-x:hidden!important}body>script+div[style^="text"]{display:none!important;}',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet) {
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}
setTimeout(function(){
    head.appendChild(style);
}, 500);
<script>
tao
  • 82,996
  • 16
  • 114
  • 150
  • I initially proposed `oveflow: hidden;` but you lose the scrollbar. Use `overflow-x`. – tao Feb 18 '17 at 18:13
  • Still Same Problem. – Mithil Amin Feb 18 '17 at 18:14
  • If you added that CSS to your CSS and it did not fix it, your `CSS` file is invalid and/or doesn't apply. No fix will work. Or you are not loading it. Have you cleared cache and hard reloaded? It works in my browser when I apply it. – tao Feb 18 '17 at 18:16
  • Try body { overflow-x: hidden !important; } – Krystian Borysewicz Feb 18 '17 at 18:17
  • There is no point, @Omnitored. There is nothing that sets the `overlfow` property for `` currently in his website. The problem is he doesn't know how to apply `CSS`. – tao Feb 18 '17 at 18:18
  • Maybe you could explain what your solution is implying..because it seems a bit overkill. – Kevin Amiranoff Feb 18 '17 at 18:47
  • I first try to fix by setting `overflow-x` property on `` which should work, since it is not currently set by any `CSS` rule. Than I try to do the same, but this time I also want to hide the banner of the *"free"* hosting company, because, most likely, they have poorly implementing their s***y code for banner. And if that doesn't work, I try to do it via javascript, half a second after the page has loaded (option 3). I would be very surprised if Option 3 didn't work. – tao Feb 18 '17 at 18:51
  • I am just saying `script+div[style]{display:none}` will hide every single `div` with an attribute of style that is preceded by a `script` tag. And `body {overflow-x:hidden!important}` will clip the horizontal edges of the body and the `important` will stop the cascading to take effect for this property. – Kevin Amiranoff Feb 18 '17 at 18:59
  • but well if it does the job... – Kevin Amiranoff Feb 18 '17 at 19:00
  • 1
    There are no other divs with style attribute after scripts. but if it makes you feel better (and you're right here - it's too general), I'll make it `body>script+div[style^="text"]{}` Good? :) That's not even for fixing the *"white space"*. I just want to remove the ad, because I'm `90%` sure they've done a sloppy job at scripting their "ad". – tao Feb 18 '17 at 19:01
  • Option 2 works for me thank you.. @AndreiGheorghiu – Mithil Amin Feb 18 '17 at 20:28
  • @MithilAmin I just checked your implementation. Please move the ` – tao Feb 18 '17 at 22:34
  • @AndreiGheorghiu can you help me out to implement an smooth slideshow? I already asked a question but no one give me an answer. – Mithil Amin Feb 19 '17 at 02:30
  • I can't for the next 24 hours, at least. If no good answers till then, I'll consider it. Recent answers of mine related to sliders and animations: [this](http://stackoverflow.com/questions/42262810/trying-to-code-a-simple-carousel/42265244#42265244) & [this](http://stackoverflow.com/questions/42258786/how-to-modify-multiple-elements-one-after-the-other/42261120#42261120). Smooth, however, has several definitions. In second link, see the third example (animating movement). – tao Feb 19 '17 at 02:38
1

The bootstrap section { display:block } is the problem

Add

#footer_area { display:inline!important }

or similar

mplungjan
  • 169,008
  • 28
  • 173
  • 236
0

Try adding #header_area { overflow: hidden; }

Michael Coker
  • 52,626
  • 5
  • 64
  • 64
0

I can't say why exactly but I do know in Firefox this issue isn't there, but Chrome it is (webkit) and when I removed the font size declaration and -webkit-tap-highlight-color from html {} the issue went away.

Unfortunately I can't really test this since I can't render your code but I reckon you disable these lines and you should be good. Font-size should be declared in % on html not in pixels.

Edit: and make sure your css reset comes before bootstrap, and your custom css comes after the reset and bootstrap.

/* bootstrap.min.css */

html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
Nathaniel Flick
  • 2,902
  • 2
  • 22
  • 31
0

Try adding this to your CSS:

body {
   min-height: 100vh;
}

This sets your body height to fit exactly. It should work, I just inspect elemented it into your website and it worked great.

See this video from Google Chrome Developers for more about fitting to the page: https://youtu.be/299RZ0d1LQY