MadleenNilsson Posted July 1, 2020 Share Posted July 1, 2020 Site URL: https://www.madleennilsson.com/ Hi tuanphan! I wonder if you can help me with getting a sticky footer to all my pages? I would like it to work as explained in the attached picture. My site has a password — Can I send it to you privately? Very best, Madleen Nilsson Link to comment
rwp Posted July 1, 2020 Share Posted July 1, 2020 If you post the password we can help. Link to comment
tuanphan Posted July 1, 2020 Share Posted July 1, 2020 Hi. Can you share link to the guide in screenshot? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
MadleenNilsson Posted July 1, 2020 Author Share Posted July 1, 2020 Of course. Link to the screenshot: https://css-tricks.com/couple-takes-sticky-footer/ Link to comment
sambarnes Posted July 9, 2020 Share Posted July 9, 2020 (edited) After looking into it this afternoon, I managed to find a solution that somewhat works. You would need to tweak it a bit for you to make it work with the size of your website. .Site-inner { min-height: calc(100vh - 9px); } .footer { height: 10px; } By using this, it should solve the problem. Check mobile view as well to see if it works fine! Edited July 9, 2020 by sambarnes Link to comment
MadleenNilsson Posted July 17, 2020 Author Share Posted July 17, 2020 Wow, thank you so much for your answer Sam! So kind of you. It's also the first code that actually has shown results when I've tried to fix this. I've managed to make it look good on my 27" monitor. But on my 15" laptop it doesn't really fit. It's like I have to choose which one of them is more important with this code. Is there any way around this? I now have the following code inserted to my css: .Site-inner { min-height: calc(100vh - 17px); } .footer { height: 10px; } And I'm sorry for the late answer. I've been working on making the site ready for public. And now it is. I thought it must be easier to look at this issue when the site is public. Thanks again for your answer. Link to comment
MadleenNilsson Posted July 17, 2020 Author Share Posted July 17, 2020 The issue is on this page: https://www.madleennilsson.com/contact Link to comment
rwp Posted July 17, 2020 Share Posted July 17, 2020 (edited) You min-height value is incorrect. Could be an input error, or the square space compiler changing it. I also don't see anything with the class "footer". Is your end goal to have the footer be at the bottom of the content on long pages, but the bottom of the screen on short pages? Edited July 17, 2020 by rwp Link to comment
rwp Posted July 17, 2020 Share Posted July 17, 2020 The correct way to do this, because the header and footer change heights dynamically is with JS. This code will do what you want, if you have a business/commerce account. $(document).ready(function() { var siteHeight = $('.Footer').height() + $('.Header').height(); $('.Site-inner').attr('style', 'min-height:calc(100vh - ' + siteHeight + 'px)'); }); Link to comment
MadleenNilsson Posted July 17, 2020 Author Share Posted July 17, 2020 Thank you so much rwp! That is correct. That's exactly the outcome I'm looking for. Where do I input this code? Should I follow the instructions you have for jQuery or is it something different for Javascript? I have a Basic Commerce account. Thanks again for your help. I appreciate it a lot! Link to comment
rwp Posted July 17, 2020 Share Posted July 17, 2020 Yes, follow the jQuery instructions. Put the jQuery script in site wide header injection, and the script above in the footer injection. (don't forget the <script> tags) Link to comment
MadleenNilsson Posted July 17, 2020 Author Share Posted July 17, 2020 Awesome! Damn, thank you so much rwp! It works great! rwp 1 Link to comment
Joly Posted September 30, 2020 Share Posted September 30, 2020 Hi! I need help with footer too. I tried the code but it didnt worked Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment