I'm fairly new to CSS responsive coding. I've used a premade boostrap template and modified it. Its working fine. The only issue is when this website is viewed on Firefox responsive design tool at different size a mysterious white space appears after the footer.
Check the screenshot below for the mysterious white space being shown when i try to view the webpage on Firefox responsive design tool at: 768x1024 . How do we remove or hide this extra space ? I have tried; overflow:hidden; but its not working. Check this Website Link for the online version of the page
Please check the image screenshot.
That space is due to the site not being 'long or tall enough' for that specific device. You can fix it by instead of using height:auto on your .wrapper element, use height:100vh.
.wrapper {
min-height: 100%;
height: 100vh !important;
margin: 0px auto -155px;
border: 1px solid #F00;
}
100vh will get the vertical height of the specific viewport that it is being used on so it will always take up the screen.
Here is a little more on Vertical Viewport Heights
Hope this helps!
It is your footer element which is at the bottom of the page.
.footer, .push {
height: 155px;
}
Also, your fix is a greasy on and won't work always:
.wrapper {
margin: 0 auto -155px;
}
Related
My website has blank space to the right of it almost as if a margin was added to the site. The site content stretches 100% across the site and looks good, but if you scroll to the right you will see the space whether you are on a desktop or mobile.
This is such an age old question which I have also encountered in the past, but in this specific scenario, I can not seem to figure out what is causing the extra space and or why it behaves the way it does.
Thanks for any suggestions!
This block of code is causing the issue:
.hentry:after {
background: rgba(0,0,0,0);
display: block;
position: relative;
left: -5.1%;
width: 110.2%;
height: 1px;
}
Set the width to 100% or less. Good luck!
Just simple add this in css file.
body { overflow-x: hidden; }
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.
http://www.dirkdunn.com/web2
I recently made a responsive layout, setting the..
max-width:100%;
property in google chrome, which works perfectly for adjusting the header image size, however, in other broweser's such as firefox, the image overlaps the parent container on the left size.
I am familiar with scott jehls picture.js polyfill, however specifying the image size for each screen size sounds like a headache inside the picture tags, is there any way to combat this in other browsers similarly to how google chrome resizes this naturally?
or at the very least, is there some kind of math formula for knowing the right picture size via the browser width? thanks.
You have set the max-height of img to 100%, however you don't have the width of it's parent defined. So, it becomes confusing to the browser to determine 100% of what thing.
Let's give the parent a width -
#headlogo {
width: 100%;
}
Also set the margin accordingly, you might wanna use margin: 0 for #headlogo.
Simply remove the h1-parent of the image and it works. (FF 32)
Try this one
max-width: 100%;
display:block;
height: auto;
Assuming you are trying to center the logo.
I would remove the float: right from the H1 and remove the margin you have. Than I would add a text-align: center to the H1. This will solve your responsive logo issue and keep the logo centered.
Your Current CSS
#headlogo {
float: right;
margin: 0 15% 0 0;
}
Proposed Solution CSS
#headlogo {
text-align: center;
}
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 responsive site I am working on. It has a gap of white space on the right side of the screen at screen sizes roughly below 767px. This is the point it goes to the "mobile" layout. I had the same issue on the desktop size and fixed it by setting the footer to 99% width and it fixed the issue on the larger screen sizes. I tried playing with the footer width for the mobile size, but with no luck.
I have not idea what is causing this white space on the right side of the screen on smaller viewports. I tried the inspect tool in the console, but I couldn't find the problem.
I would post code, but seeing as I can't track the problem down, I wouldn't know what to post.
URL of page: http://sevenclanscasino.designangler.com/warroad/warroad-home
For anyone with a similar issue and struggling by hovering over elements in devtools, I came across this trick on another forum.
* { border: 1px solid red !important; }
This very very helpfully shows you all the boundaries in your project. In my case it was a grid overflowing its parent. Enjoy!
Try to change some elements into your css.
.row { margin-left: 0; margin-right: 0; }
header #top-nav-container #top-nav { width: 100%; }
header #top-nav-container #top-nav { margin-left: 0; }
another way (but please dont do that) :
body { overflow: hidden; }
When working on a responsive website, you should always set width values in % rather than px. So try setting with:100%
Hope this helps.