Is there a way to remove the white space below the footer in :- http://getbootstrap.com/examples/sticky-footer-navbar/
I've fixed this by adding {position:fixed;width:100%} but it only works for a few pages. For the other pages the footer doesn't appear at all. I've also read this but it doesn't seem to work : Can't remove Whitespace at the bottom of my document.
Could someone please explain what is the error here?
I once had the same issue using bootstrap
I used this css to stick the footer to the bottom of the page:
*{
margin: 0;
}
.wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -0em;
}
.footer, .push{
height: 2em;
}
.footer, .push{
clear: both;
}
Put all the content in the wrapper class and use the footer class below the wrapper.
I found it somewhere when I had this issue and it worked.
Related
I created a div where I plan to a title for my webpage, I set the width to 100% but there was still white on the sides and top. I got the top to disappear but the sides won't, I assume it's got something to do with the movement of the div, I've checked everywhere, but everyone has different divs for different purposes so I couldn't find the answer. In case you guys wanna show an example of your solution you could do so here
Here is the HTML:
<div id="toptitle">
</div>
For my CSS I tried using margin-left: -8px and the same for the right side but they don't work like that, it's only movement of the div and even when I don't set the left side yet the right still won't move till there's isn't a white gap:
#toptitle {
width: 100%;
height: 140px;
background: #42647F;
margin-top: -15px;
}
Reset your body margin. Also make a research for reset css.
body {
margin: 0;
}
Add margin: 0 to the body :
body{
margin:0;
}
You are missing body margin, please have a look at the below working snippet taken from your codepen. and there is no need to have negative top margin too.
body {
margin: 0
}
#toptitle {
width: 100%;
height: 140px;
background: #42647F;
}
<div id="toptitle">
</div>
The body tag has a default margin of 8px which you have to remove. So just add this to your code:
body{
margin:0;
}
You should also remove margin-top:-15;
Hope this is clear to you!
I'm building a website using a grid system as the framework. At first I had no problems with margins and padding, but now I have extra white space on the right side of my website.
Here is my fiddle: http://jsfiddle.net/071ad2hg/1/
I already found the problem and it is from the following code:
.grid_12 { width: 100%; }
When I comment out this line the problem goes away, but I've used it in many places throughout my site and am wondering why this is happening all of a sudden. I would like to keep it as is and just fix it somehow.
Beacuse body has 8px margin you can change that by adding margin 0 to body css tag
demo http://jsfiddle.net/ckqkyaqd/
body {
font-family: 'elegant_luxmager';
color: #444948;
margin:0;
}
Add this to your body in the css.
margin: 0;
and set a pixel width for your grids.
.grid_12 {
width: 1000px;
margin: 0 2% 1% 0;
float: left;
display: block;
}
I would suggest using a .wrapper instead.
.wrapper {
margin-left: auto;
margin-right: auto;
width: 1000px;
}
<div class="wrapper"></div>
Found your issue:
It's the 25% margin that adds the whitespace, use a wrapper to center that part or use <center>
#images_row_1, #images_row_2, #images_iOS {
margin-left: 25%;
}
Use the inspector in Google Chrome developer tools and see the order in which the CSS is being applied. You have this additional margin which is being applied to the div. Try using a wrapper div or better yet use a defined responsive framework like Bootstrap or Foundation.
#images_row_1, #images_row_2, #images_iOS {
margin-left: 25%;
}
I was trying to make my home page have a 2x2 grid of images.
There was a thread with a similar question already. The answer was to include this code:
#home_page .canvas {
max-width: 590px;
}
I did this and it kicks my footer over to the left. I went into the CSS and tried under every footer mention I could find to include text-align: center; code although to no avail. I also tried playing with the 590px, but it moves the images over and no longer centers them.
Any help is appreciated.
Here is a link to my page: http://johnathonpowers.bigcartel.com/
Please remove the
float:left;
property from the
#site_footer footer {
}
CSS class and it should all work fine for you.
In essence, you #site_footer footer class should look like this:
#site_footer footer {
width: 100%;
min-width: 900px;
clear: both;
margin: 0 auto;
padding-bottom: 0px;
text-align: center;
}
You #site_footer footer class currently looks like this:
#site_footer footer {
width: 100%;
min-width: 900px;
clear: both;
float: left;
margin: 65px auto 0px;
padding-bottom: 10px;
text-align: center;
}
What can be the reason to have both width and min-width properties (that too with wide differences in values). Keep one width property value (either width or min-width). Similarly, why float after clear? Understand that clear is used to remove any previous floats. If you want to continue floating, there's no reason to write clear: both
Hope this helps!!
EDIT: Please see the screenshots below!!!!
#site_footer footer
#site_footer footer 2
If you remove the float:left, your footer div will be centered.
In case you can't do it, you can overwrite the float:left property in your CSS file as such:
#site_footer footer {
float:none !important;
}
I'm trying to implement a sticky footer such as this but if my content is shorter than the footer still appears partially past the fold. I can see about 25px of it and I have to scroll down to see the rest. Here is the relevant CSS:
* {
box-sizing:border-box;
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin-bottom: -60px;
}
.wrapper:after {
content: "";
display: block;
}
.footer, .wrapper:after {height: 60px;}
I'm using Chrome but the problem also exists in Safari. I've tried it without using pseudo selectors but I have similar issues. All of my content is wrapped in the wrapper div except for the footer.
Vertical margins will cause issues when using sticky footer because of how height is calculated, which can be seen here: http://jsfiddle.net/b9Zy7/
Change margin-top to padding-top on p and all is well.
I'm using a sticky footer for the first time with a site I putting together, however doesn't seem to be going as planned. There appears to be a large white space, and then a black area (this is the color of my footer) please see link http://c-hall.the-word.com/assignment/whatwedo.php I need the footer to butt up to the bottom of the last bit of content, in this case the text witch is yet to be styled. Please see code below - thanks for your help - Charley
CSS
/* sticky footer */
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -335px;
}
.footer, .push {
height: 335px;
background-color: #000;
}
#innerfooter {
width: 847px;
height: 335px;
position: relative;
background-image: url(../images/black_bar.png);
background-repeat: no-repeat;
text-align: left;
margin: 0 auto;
}
/* end sticky footer */
Try this out for size, this will stay at the bottom of the page if the content isn't long enough and prop up the bottom if the content reaches it http://ryanfait.com/sticky-footer/
Look at your html structure (Especially at the .wrapper div.). The placement of the div is wrong.
And read this link: http://www.cssstickyfooter.com/
You are always going to have this gap because the position of your footer is static so it's fixed to the bottom of your browser. This white gap is your body background width unused space. So fill it or eliminate it by less width of your page or any other approach you find appropriate !
The point is I'm not giving you a precise solution but it's more important to understand what you're doing not just applying tutorials.