In my case, I am using a template where the same page is repeated with the same template. However, there seems to be a massive margin-top element on three of my pages, and unfortunately, I can't seem to get rid of it.
I attempted adding a style="margin-top:30px" and even tried adding style="margin-top:30px; !important" in an attempt to override this issue, but neither worked.
Through the developer tool inspector in Chrome, I observed that the margin-top is set at 698px, which is way more than what I desire... ideally, it should be around 30px or less.
<footer id="footer" class="dark" style="margin-top: 698px;">
The HTML code for the footer is as follows:
<footer id="footer" class="dark">
<div class="container">
<div id="copyrights">
<div class="container clearfix">
<div class="col_half">
Copyrights © 2013-2019<br>Daniël E. Cronk<br>
</div>
<div class="col_half col_last tright">
<div class="fright clearfix">
<a href="#" class="social-icon si-small si-borderless si-facebook">
<i class="icon-facebook"></i>
<i class="icon-facebook"></i>
</a>
<a href="https://www.twitter.com/dereizigercronk" class="social-icon si-small si-borderless si-twitter">
<i class="icon-twitter"></i>
<i class="icon-twitter"></i>
</a>
<a href="https://www.instagram.com/a333msptoams" target="_blank" class="social-icon si-small si-borderless si-instagram">
<i class="icon-instagram"></i>
<i class="icon-instagram"></i>
</a>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</footer>
Upon inspecting the CSS hierarchy, it appears that the footer has the following CSS elements:
bootstrap.css
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
display: block;
}
style.css
#footer {
position: relative;
background-color: #EEE;
border-top: 5px solid rgba(0,0,0,0.2);
bottom: 0;
}
/* Other styles from style.css */
.dark.css</p>
<pre><code>#footer.dark,
.dark #footer {
background-color: #333;
color: #CCC;
border-top-color: rgba(0,0,0,0.2);
margin-top: 30px;
display: inline-block;
position: fixed;
bottom: 0;
}