Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Question

  • Answers 12
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Awesome! Damn, thank you so much rwp! It works great! 

Posted Images

12 answers to this question

Recommended Posts

  • 0
Posted (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 by sambarnes
Link to post
  • 0

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 post
  • 0

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?

image.png.e69cc7151ee164fab7548e37455f14ed.png

Edited by rwp
Link to post
  • 0

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 post
  • 0

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 post
  • 0

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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...