I've been all over this website and I've read every question about footers not working that I can find. I've implemented every one of them to my page and I can't get a single solution for my site. I'm new to CSS and HTML, so please bear with me.
I have a Big Cartel Page and I use the Sidecar theme. I have been playing with code, changing fonts, altering image sizes and mostly just adding small tweaks here and there. I would love to add a footer with my contact info (phone, email, copyright, etc) that sits at the bottom of every page.
My homepage and FAQ pages are very long, and I need the footer to sit out of sight until the user scrolls all the way past the text to the bottom. But I also have many product pages that vary in length, but are sometimes short enough that I worry about the footer creeping up from the bottom.
I have tried every answer on this page, and I'm sorry in advance for not knowing how to share all of my trials well. I have tried every position I can find (fixed, static, relative, absolute) and I don't know what else I should try. Every one of them has the footer stretched across the screen well above the bottom of the page.
I can't figure out if it's the theme I'm using on Big Cartel to blame, or my own shortcomings with code. Probably the latter. Either way, I'd love any insight, as the main source of my trials is that link I posted, and it's from several years ago.
See You have to put footer dive after closing of main overlay div
<div class="footer">
<p>© 2018 www.silverframesoapworks.com</p>
</div>
CSS
.footer {
position: fixed;
width: 100%;
z-index: 10;
bottom: 0;
background: #000;
color: #fff;
text-align: center;
padding: 5px 0;
}