I'm loading a front-end site onto wordpress and on the blog page my footer won't stay fixed to the bottom of the page / wants to float upwards so it ends up looking like this -
It doesn't do it on the other pages but I've also noticed on Google chrome there's a white strip at the foot of the page also on every page.
I've looked for solutions via google - majority seem to suggest position: absolute but I've tried that and it hasn't worked. This is my code at the moment -
style.css
footer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: auto;
width: auto;
background-color: black;
}
body {
position: relative;
margin-bottom: 6rem;
}
footer.php
<!-- footer -->
<footer>
<div class="container-fluid">
<div class="row no-gutters">
<div class="col-md-3">
<div id="socialmedia">
<i class="fa fa-twitter"></i><span></span>
<i class="fa fa-facebook"></i><span></span>
<i class="fa fa-google-plus"></i><span></span>
<i class="fa fa-instagram"></i><span></span>
<i class="fa fa-pinterest"></i><span></span>
</div>
</div>
<div class="col-md-6">
<div id="email">
<img src="<?php echo home_url(); ?>/wp-content/uploads/2017/10/footer_logo.png" style="width: 150px; height: 50px; margin-bottom: 20px;">
<p>Email: hello#havoccreative.com </br>+971 (0)55 151 0491 or +971 (0)55 282 2114
</br>PO Box 769558, twofour54, Abu Dhabi</p>
<p>This website was design by us *pause for applause*</br> and built with his bare hands by Michael Whitehead.</br> © Havoc Creative 2017</p>
</div>
</div>
</div>
</div>
</footer>
<!-- /footer -->
Any help appreciated.
Flexbox can help you! =) Remove position absolute from footer and try this solution:
Step 1: add this to your body element:
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
Step 2: add this to your footer:
footer {
margin-top: auto;
}
Also you can check this article for more ways to create a sticky footer.
Changing the position of the footer to fixed and removing top: 0 and right: 0 should do the trick.
footer {
position: fixed;
left: 0;
bottom: 0;
height: auto;
width: auto;
background-color: black;
}
I think your problem lies within the fact that you've reserved the space for your footer on body {} by setting a margin of 6rem, but not set any off-set for your footer, like top: 6rem;.
Don't forget - usually everything goes "inside" body {}, for example, like so:
<body>
<header></header>
<article>
<left_column></left_column>
<right_column></right_column>
</article>
<footer></footer>
</body>
So, again, to get the effect you want, you have to also off-set the footer position, otherwise you're just "lifting" the whole thing up together. So what you need to do is to modify your style.css to look like:
footer {
position: fixed;
top: 6rem;
left: 0;
right: 0;
bottom: 0;
height: auto;
width: auto;
background-color: black;
}
body {
position: relative;
margin-bottom: 6rem;
}
Another way would be to use padding-bottom instead of margin-bottom - that way body would fill the screen height and leave space for your footer, however, you'd have to change top: 6rem to something else then.
Related
how to sticky div on scroll
see my screenshoot :
this screenshoot if sticky on top :
and this screenshoot sticky on scroll :
i mean like this, if sticky go to top the div back to normal (i mean without css sticky)
see this screenshoot, i want like this, if div stick go to the top back to normal (without css sticky) :
this my sticky :
#media screen and (min-width: 768px) {
.sticky {
position: fixed;
z-index: 9999;
display: block;
background-color: #2069e8;
width: 100%;
padding: 10px;
margin-top: -10px;
padding-top:10px
}
}
<div class="sticky">
<div class="col-sm-2">
<h2 style="margin:0px; width:250px;"><span class="smallnav menustater" onclick="openNav()"><i class="fa fa-th-list"></i></span> MY WEB</h2>
</div>
</div>
Please Help
Thanks before
The easiest solution is to keep your div always sticky but increase the padding-top of the div that is below it to make sure that the content can't go under the sticky div.
This will avoid this:
By moving the page content to the bottom.
Demo: https://jsfiddle.net/g9nhq3up/
You have to set padding-top: to the content (not to the nav)
See code:(JSFiddle:https://jsfiddle.net/0fp1qsw3/)
.sticky {
position: fixed;
z-index: 9999;
display: block;
background-color: #2069e8;
width: 100%;
padding: 10px;
margin-top: 15px;
padding-top:10px
}
.content{
padding-top: 50px;
}
<div class="sticky">
<div class="col-sm-2">
<h2 style="margin:0px; width:250px;"><span class="smallnav menustater" onclick="openNav()"><i class="fa fa-th-list"></i></span> MY WEB</h2>
</div>
</div>
<div class="content">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>
</div>
I'm trying to add two sidebars to both edges of the middle element. The left one works without an issue, however, the right one won't. Instead, it appears below its parent element (as seen in the picture) unless I position it as absolute, then however, it goes over the navbar.
Relevant css:
/* The parent element */
main {
margin: 0;
position: relative;
left: 22%;
right: 22%;
width: 56%;
height: 50vh;
background-color: #c5c5c5;
}
/* The correctly shown sidebar */
.sidenav {
margin: 0;
height: 100%;
width: 160px;
top: 7%;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 7%;
}
/* The wrongly shown sidebar */
.bar-right{
float: right;
margin: 0;
width: 200px;
height: 100%;
background-color: #111;
overflow-x: hidden;
padding-top: 7%;
}
HTML:
<main>
<div class="topbar">
[top bar stuff]
</div>
<div class="sidenav">
[usernamestuff]
Link1
Link2
Link3
</div>
<div class="bar-right">
<p>text for test</p>
</div>
</main>
Both sidebars are effectively identical so I don't understand why they behave so differently. How do I get them both to their appropriate edges of the main element?
I would recommend you to use Bootstrap. This will help you to achieve what you looking for so easy, by this code:
<div class="container">
<div class="row">
<div class="col-sm-3">
// First sidebar
</div>
<div class="col-offset-6 col-sm-3">
// Second sidebar
</div>
</div>
</div>
I am new to bootstrap.I a creating website in which i get space after footer when minimize it to mobile size.I made margin:0;padding:0.Still not working.HTML code is
body {
width: 100%;
background-color: #FF9933;
}
#footer_img {
margin-top: -50px;
width: 100%;
height: 60px;
}
.container-fluid {
padding: 0px;
margin: 0px;
height: 100%;
}
.footer1 {
height: 100%;
margin: 0;
}
body {
padding: 0;
margin: 0;
}
<div class="container-fluid section">
<div class="row">
<img class="img-responsive" src="images/Content_bg.png" alt="content image" id="content_img"/>
</div>
</div>
<footer class="container-fluid footer1">
<img class="img-responsive" src="images/footer2.png" alt="footer image" id="footer_img"/>
</footer>
In footer image you have the footer image bound to the top of the page, actually above it. Running your code in jsfiddle from #footer_img I removed both margin-top and height and it appeared to work. Let me know if it doesn't.
If I am understanding your question correctly the problem is that the padding isn't appearing.
Well for starters when using bootstrap you can only have one container, and here you have two.
div class="container-fluid section"
footer class="container-fluid footer1"
This might be what is causing the problem. Correct that and reupload if it isn't resolved. Thanks
I'm using this style admin panel. When I make a big form as register page, the footer looks weird. Here is what it looks like. I'm a beginner with css so I hope someone can help me how to make this look right. The footer is supposed to look like the login, like here. I didn't change anything with the standard css. Here's my code:
<div class="login-overlay">
<div class="logo">
Log IP <br> <span class="smaller">test</span>
</div>
<div class="form-container shadow">
<div class="icon">
#yield('icon')
<div class="header">
#yield('name')
</div>
</div>
<div class="inputs">
#yield('login-content')
</div>
</div>
</div>
<footer class="mdl-mini-footer login-footer">
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">©Material Dashboard Theme</div>
</ul>
</div>
<div class="mdl-mini-footer__right-section">
<div class="mdl-logo">Terms and Conditions Apply</div>
</ul>
</div>
</footer>
When I inspect the footer, this it what it says:
.login-footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 10px 30px;
background-color: white;
box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.1);
}
It also says more CSS but I guess this is the most important part. What is the best way to fix this?
Your question was somewhat unclear to me, If your problem just is that you think the footer is too tall, you should try the css max-width property like this:
.footer {
max-width:120px;
}
If you want a footer that sticks to the bottom you should check out Ryan Fait's CSS Sticky Footer. The code is very simple and it will force the footer to always stay at the bottom.
You wrap the footer in a .wrapper and use this css code:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
height: 100%;
margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 155px; /* .push must be the same height as .footer */
}
No matter what your problem is, you should really get rid of those </ul>-elements as some people commented.
I have a fairly complex layout that I am building, it relies on a is affected by height, and min-height's so the usual tricks to position the footer at the bottom aren't working.
Given my JSFiddle how can I position the footer at the bottom when the content is a lot or minimal?
Here is some of the css I am currently using:
body, html, #wrapper {
height: 100%;
min-height: 100%;
}
.header {
height: 30%;
background-color: aliceblue;
}
.main {
background-color: antiquewhite;
}
.main .content {
height: 2000px;
background-color: aquamarine;
padding-bottom:80px;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background-color: beige;
}
If I understand your requirement correctly, you want the footer to sit at the bottom of the content box.
One solution is to make the content box position:relative and move the footer inside it, so that its position:absolute will bind it to the content box, and the bottom:0 will achieve the desired effect of having it sit against the bottom of said content box.
See http://jsfiddle.net/wn6uvske/5/.
HTML:
<div id="wrapper">
<div id="sidebar"></div>
<div id="body-content">
<div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<ul class="nav navbar-nav navbar-right">
<li>Toggle Menu
</li>
</ul>
</div>
</div>
</div>
<div class="main">
<div class="content container">
<p>Content</p>
<div class="footer"> <!-- moved up into content container -->
<p>Footer</p>
</div>
</div>
</div>
</div>
</div>
(relevant) CSS:
.main .content {
height: 2000px;
background-color: aquamarine;
padding-bottom:80px;
position:relative;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background-color: beige;
}
you can use the sticky footer trick. Wrap all of your content in a wrapper excluding the footer, set min-height:100% and margin: -(footer height) on said wrapper to keep it at the bottom:
FIDDLE
UPDATE
You can take the header section out and use CSS calc() to adjust the height:
NEW FIDDLE