Decreasing Section Padding Squarespace 7.1

1 hour ago, JuliaBee said:

Hey all - I've tried just about every variation that has been on this forum and can't seem to fix my site! I'm stumped and need a bit of help with writing the code.  I'm trying to make the top padding of the section that has logos in it 10px. 

Can someone please help me with this?  Website is public: https://2tmarketing.com/

THANK YOU!

Add to Home > Design > Custom CSS

.Header-inner.Header-inner--bottom {
    padding-top: 0;
}

31 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

.Header-inner.Header-inner--bottom {
    padding-top: 0;
}

 

Heya - just tried this and it didn't work, nothing on the page changed

3 hours ago, JuliaBee said:

I'm trying to make the top padding of the section that has logos in it 10px. 

Remove any previous CSS attempts at this effect.

Add the following to Design > Custom CSS.

#collection-5f3d3c81b6cc02649eeae2f8 #clientlogos .Index-page-content {

  padding-top: 10px;
  
  }

Let us know how it goes.

11 hours ago, creedon said:

Remove any previous CSS attempts at this effect.

Add the following to Design > Custom CSS.

#collection-5f3d3c81b6cc02649eeae2f8 #clientlogos .Index-page-content {

  padding-top: 10px;
  
  }

Let us know how it goes.

This worked!  Thank you so much!

Arrghh! I can't get rid of all the space 🤦‍♂️

I have a page at https://podifornia.com/uni and I am trying to remove all of the whitespace in the second section which holds my embed block which is a podcast player. I am trying to fill the entire section with the player.

It's been about two hours without luck so I'm sending up a flare! 

Anyone have any ideas?

5 hours ago, Phil1570047712 said:

Arrghh! I can't get rid of all the space

This won't get rid of it all but it's a start. You have what looks like an empty text block above the code block that appears to be adding a little padding. Get rid of that.

I got it!

Thanks for reminding me about that hidden text block!

[data-section-id="5fbec4069ee0f32b87371ba7"] .content-wrapper {
    padding-top: 0px !important;
    padding-bottom: 0px !important;    		padding-left: 0px !important;
    padding-right: 0px !important;
  	margin-bottom: -28px !important;
}

@Phil1570047712

The following CSS might take you the rest of the way.

/* begin remove margins and padding in page section with player */

  [data-section-id="5fbec4069ee0f32b87371ba7"]:not( .full-bleed-section ) > .content-wrapper {
  
    margin-bottom: -10px; /* the player seems to have about 10px of black space
                             at the bottom so we try to cover that up */
    padding: 0 !important;
    
    }
    
  [data-section-id="5fbec4069ee0f32b87371ba7"] .sqs-layout > .sqs-row {
  
    margin-left: 0;
    margin-right: 0;
    
    }
    
  [data-section-id="5fbec4069ee0f32b87371ba7"] .sqs-layout:not( .sqs-editing ) > .sqs-row:first-child > [class*=sqs-col]:first-child > .sqs-block:last-child {
  
    padding-bottom: 0;
    
    }
    
  [data-section-id="5fbec4069ee0f32b87371ba7"] [class*=sqs-col] .sqs-block {
  
    padding-left: 0;
    padding-right: 0;
    
    }
    
  /* end remove margins and padding in page section with player */

On extra wide windows there is still spacing on the sides which can't be helped as the content appears to have a maximum width.

Let us know how it goes.

Hi all, both in my “portfolio page” and on my “project page” on some of the blocks there is a blank space (top and bottom). I want to remove the space completely. In the settings, it gives me the option to reduce it up to 10(custom height), I would like to make it 0, but it is not allowing me. How can I do this? I've read in this chat, and I saw many people where trying to do the same. I have tried injecting some of the codes written but they didn't work, some of the affected the size of my background video instead. I am not too knowledgeable of coding, anyone able to help me resolve this?

1 hour ago, vcampaner said:

Hi all, both in my “portfolio page” and on my “project page” on some of the blocks there is a blank space (top and bottom). I want to remove the space completely. In the settings, it gives me the option to reduce it up to 10(custom height), I would like to make it 0, but it is not allowing me. How can I do this? I've read in this chat, and I saw many people where trying to do the same. I have tried injecting some of the codes written but they didn't work, some of the affected the size of my background video instead. I am not too knowledgeable of coding, anyone able to help me resolve this?

I forgot to put my website: https://bronze-bamboo-328c.squarespace.com

@vcampaner

Please post your site-wide password so we can take a look at your issue.

2 hours ago, creedon said:

@vcampaner

Please post your site-wide password so we can take a look at your issue.

https://bronze-bamboo-328c.squarespace.com

pass: ciao

thank you 

@vcampaner

Here is some CSS to get you started. Add the following to Design > Custom CSS.

.tweak-portfolio-grid-overlay-height-custom .portfolio-grid-overlay {

  padding-top: 0;
  
  }

.sqs-layout:not( .sqs-editing ) > .sqs-row:first-child > [class*=sqs-col]:first-child > .sqs-block:last-child {

  padding-bottom: 0;
  
  }

After you add the above in, if you could point out more areas where there is unwanted spacing. We may be able to extend the CSS.

Let us know how it goes.

On 12/16/2020 at 1:09 AM, creedon said:

@vcampaner

Here is some CSS to get you started. Add the following to Design > Custom CSS.

.tweak-portfolio-grid-overlay-height-custom .portfolio-grid-overlay {

  padding-top: 0;
  
  }

.sqs-layout:not( .sqs-editing ) > .sqs-row:first-child > [class*=sqs-col]:first-child > .sqs-block:last-child {

  padding-bottom: 0;
  
  }

After you add the above in, if you could point out more areas where there is unwanted spacing. We may be able to extend the CSS.

Let us know how it goes.

This worked wonderfully, thank you so much 🙂

On 12/16/2020 at 1:09 AM, creedon said:

@vcampaner

Here is some CSS to get you started. Add the following to Design > Custom CSS.

.tweak-portfolio-grid-overlay-height-custom .portfolio-grid-overlay {

  padding-top: 0;
  
  }

.sqs-layout:not( .sqs-editing ) > .sqs-row:first-child > [class*=sqs-col]:first-child > .sqs-block:last-child {

  padding-bottom: 0;
  
  }

After you add the above in, if you could point out more areas where there is unwanted spacing. We may be able to extend the CSS.

Let us know how it goes.

Hi @Creedon, 

I might have one more questions about those spacing. When I look at the design on Mobile view, I see spacing on the side of my gallery in my portfolio page (attached screenshot below). When I try to edit the page the spacing is already at 0px. I think I need a CSS to fix this . 

let me know if you can help again. 

the website name is now : vittoriacampaner.com 

truly thank you very much 🙂

15 hours ago, vcampaner said:

When I look at the design on Mobile view, I see spacing on the side of my gallery in my portfolio page (attached screenshot below). When I try to edit the page the spacing is already at 0px. I think I need a CSS to fix this .

Add the following to Design > Custom CSS.

/* zero padding on sides of portfolio on mobile */

@media screen and ( max-width: 767px ) {

  .tweak-portfolio-grid-overlay-width-full .portfolio-grid-overlay {
  
    padding-left: 0;
    padding-right: 0;
    
    }
  }

Let us know how it goes.

I'm having trouble with padding between sections too and have tried a few of the above suggestions to no avail. Can you assist me? I'm looking for a side-wide solution to all section spaces to be removed.

Website is www.livingcatholic.com.au

see the big gaps between the header and the first section and between the first and second section:

Hi @creedon, 

I'm having trouble reducing the space between the bottom section and the 2nd from last section on this page: https://www.originalmikematerial.com/forwardpressure

Please could you take a look? 

Many thanks for your time in advance!

Mike

21 hours ago, MichaelaPang said:

I'm having trouble with padding between sections too and have tried a few of the above suggestions to no avail. Can you assist me?

I can't find that page on your site. It is hard to help when we can't see the page.

On 1/23/2021 at 3:07 PM, creedon said:

I can't find that page on your site. It is hard to help when we can't see the page.

apologies. It's www.livingcatholic.com.au/sign-up

On 1/22/2021 at 10:38 PM, MIGUELH said:

Hi @creedon, 

I'm having trouble reducing the space between the bottom section and the 2nd from last section on this page: https://www.originalmikematerial.com/forwardpressure

Please could you take a look? 

Many thanks for your time in advance!

Mike

Hi @creedon, if you have time, could you take a look? Cheers!

@MIGUELH

Add the following to Design > Custom CSS.

#page-5fe891a4ba6e675c850cee51 .sqs-block-gallery {

  padding-bottom : 0;
  padding-top : 0;
  
  }

Let us know how it goes.

@MichaelaPang

On the page you showed what happens if you set a custom height of 10 for the first two page sections?

Let us know what happens.

On 4/10/2020 at 6:14 AM, tuanphan said:

Try this

[data-section-id="5e8f4059a780b645bb8468ac"] {
    min-height: 10vh !important;
}
[data-section-id="5e8f4059a780b645bb8468ac"] .content-wrapper {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

 

Thanks.  This worked for my site - removed that pesky and very annoying white space between sections.  To find the "data section id" just right click on that part of your page and then click on "inspect" and then copy the data section ID from the code (you might have to enter html edit more to do that on a Mac).  Also, you can play with the px number to get the padding just right.  Again, thanks tuanphan!

On 1/27/2021 at 1:12 AM, creedon said:

@MichaelaPang

On the page you showed what happens if you set a custom height of 10 for the first two page sections?

Let us know what happens.

On 1/27/2021 at 12:59 AM, creedon said:

@MIGUELH

Add the following to Design > Custom CSS.

#page-5fe891a4ba6e675c850cee51 .sqs-block-gallery {

  padding-bottom : 0;
  padding-top : 0;
  
  }

Let us know how it goes.

AH MAN, it worked. Thanks a million! It looks beautiful now!!