Reduce Footer Padding

Site URL: https://willowandwhitestudio.com/home

I am trying to reduce the padding of my footer using Squarespace 7.1. I have tried various CSS but can't seem to get it working.

I'd like the bottom section below the Instagram section to be about half the height that it currently is.

Can anyone please help?

password for the page is: workinprogress

I have tried using the following CSS and playing around with padding - it seems to work initially, but then once saved, it goes back to the original height.

footer#footer-sections {
  padding-top:-100px;
}

I also currently have the following code to make my instagram feed full width:

//*Full width IG footer*//

#footer-sections section:first-of-type {

  min-height: auto;

}

#footer-sections section:first-of-type .content-wrapper {

  padding: 0!important;

  max-width: 100%;

}

#footer-sections section:first-of-type .instagram-block {

  padding-bottom: 0!important;

  padding-top: 0!important;

}

Not sure if the code is interfering somehow? I'm still learning CSS!

Thank you!

Add to Home > Design > Custom CSS

div#block-yui_3_17_2_1_1584969760368_21035+.row .spacer-block {
    padding-bottom: 0;
    padding-top: 0;
}

Thank you so much! How did you find the right selector to use? I use Google Chrome's Block Identifier but couldn't find that block ID.

2 minutes ago, RoxyL said:

Thank you so much! How did you find the right selector to use? I use Google Chrome's Block Identifier but couldn't find that block ID.

That block has no ID, you will need to know about the code to use the ID of another block, for the current block...

Thanks. How would I go about reducing the spacing between these two sections on the home page so that there is less white space?

3 minutes ago, RoxyL said:

Thanks. How would I go about reducing the spacing between these two sections on the home page so that there is less white space?

 

 

Try adjusting Section Height first.

If it doesnt work, add this code to Home > Design > Custom CSS

[data-section-id="5e6e48b1a53943154aaf8783"] .content-wrapper {
    padding-bottom: 0 !important;
}
[data-section-id="5e6e4eb88afded74f541fbe2"] .content-wrapper {
    padding-top: 0 !important;
}

Great, thank you! Very helpful.

Hi!

Would you please help with reducing the footer on this site, it's 7.0

1 hour ago, sophieoc said:

Hi!

 

Would you please help with reducing the footer on this site, it's 7.0

Can you share link to your site? We can check easier.

@tuanphan

I have tried using your code above with the block ID for my site to remove the white space above the Insta feed but it doesn't seem to be working. I am currently using div#block-yui_3_17_2_1_1590766319551_24557 {
    padding-bottom: 0;
    padding-top: 0;
}

This removes bottom spacing but not top.

Any ideas greatly appreciated.

Thanks,

A

On 6/19/2020 at 7:00 PM, AvrilAnderson said:

@tuanphan

I have tried using your code above with the block ID for my site to remove the white space above the Insta feed but it doesn't seem to be working. I am currently using div#block-yui_3_17_2_1_1590766319551_24557 {
    padding-bottom: 0;
    padding-top: 0;
}

This removes bottom spacing but not top.

Any ideas greatly appreciated.

Thanks,

 

Each case needs different code. Can you share link to your site? I can check easier.

@tuanphan Hello I would also like the padding in my footer to be much smaller. Can you please provide me with the block ID?

Link: studiorhodes.net

Password: services

2 hours ago, StudioRhodes said:

@tuanphan Hello I would also like the padding in my footer to be much smaller. Can you please provide me with the block ID?

 

Link: studiorhodes.net

Password: services

Add to Home > Design > Custom CSS

footer.sections {
section {
    min-height: unset !important;
}
section .content-wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
}

@tuanphan Amazing thank you!

Hello, I tried to reduce my footer by using this code but it caused blank space to appear as if there is not enough page for the website.  Any suggestions on how to reduce the footer but remove the blank space as well?  

My site URL is https://re-shft-sample-site.squarespace.com

Password: view

footer.sections {
section {
    min-height: unset !important;
}
section .content-wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
}

On 9/2/2020 at 10:14 PM, re-shftstudios said:

Hello, I tried to reduce my footer by using this code but it caused blank space to appear as if there is not enough page for the website.  Any suggestions on how to reduce the footer but remove the blank space as well?  

 

My site URL is https://re-shft-sample-site.squarespace.com

Password: view

footer.sctions {
section {
    min-height: unset !important;
}
section .content-wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
}

Do you still need help on this? If yes, can you take screenshot the padding? WE can check easier.

I am running into  similar problem with my site. The footer section is way too large and I have no idea how to reduce it. comiccubes.com I’m using the Bedford template.

On 9/23/2020 at 1:41 AM, LayneD said:

I am running into  similar problem with my site. The footer section is way too large and I have no idea how to reduce it. comiccubes.com I’m using the Bedford template.

Add to Home > Design > Custom CSS

div#footerBlocks {
    margin-top: 0 !important;
}
.footer-inner {
    padding: 10px !important;
}

On 9/23/2020 at 6:37 PM, tuanphan said:

Add to Home > Design > Custom CSS

div#footerBlocks {
    margin-top: 0 !important;
}
.footer-inner {
    padding: 10px !important;
}

 

That worked perfectly. Thank you!

4 hours ago, Emma456 said:

Hi @tuanphan

I'm trying to alter the padding between my footer elements too - but can't seem to work out the code to do it. Would you be able to help? I'm looking to reduce the padding between the middle, navigation and bottom footer blocks. 

my website is www.stampdesignco.com and access password is spaceform1

Thanks in advance 🙂,

Emma

Add to Home > Design > Custom CSS

nav.Footer-nav {
    padding: 0 !important;
}
div#footerBlocksMiddle {
    padding-bottom: 0;
}
div#footerBlocksBottom {
    padding-top: 0;
}
div#block-yui_3_17_2_1_1603645721676_3198 {
    padding-bottom: 0;
}

hi @tuanphan

am also trying to remove extra grey space between the sections and footer across my site, have tried to minimize the footer padding at top, but doesn't seem to be working only enlarging the space. When I select L or 100 height for the section above it works, but I end up with too much white space which I don't want. Help much appreciated!

site: www.ysdm.studio
pass: YSDM2020

22 hours ago, ysdm said:

hi @tuanphan

am also trying to remove extra grey space between the sections and footer across my site, have tried to minimize the footer padding at top, but doesn't seem to be working only enlarging the space. When I select L or 100 height for the section above it works, but I end up with too much white space which I don't want. Help much appreciated!

site: www.ysdm.studio
pass: YSDM2020

Can you share link to page in screenshot?

hi, was able to fix this by changing background color to transparent for all color ways (even dark/accent/black etc.)

Would love some help with this, as well (my first 7.1 site and some of my 7.0 CSS hacks aren't working). I'm looking to get the footer content width at 100%, but can't seem to find the right identifiers in the source code.

Site: https://eversage.squarespace.com/home
Pass: eversage

Thanks!

8 hours ago, bdk.nyc said:

Would love some help with this, as well (my first 7.1 site and some of my 7.0 CSS hacks aren't working). I'm looking to get the footer content width at 100%, but can't seem to find the right identifiers in the source code.

Site: https://eversage.squarespace.com/home
Pass: eversage

Thanks!

Add to Home > Design > Custom CSS

footer.sections .content {
    width: 100% !important;
}