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

Question

11 answers to this question

Recommended Posts

  • 0

If you post the password we can help.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 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

Share this post


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.

Share this post


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

image.png.e69cc7151ee164fab7548e37455f14ed.png

Edited by rwp

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


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)');
});

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


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! 

Share this post


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)


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


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...