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

Decreasing Section Padding Squarespace 7.1


Recommended Posts

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

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

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 3 weeks later...

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?

Link to comment
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

 

Link to comment

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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
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 🙂

Link to comment
  • 3 weeks later...
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 🙂

 

Screenshot 2021-01-09 at 10.17.05.png

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 2 weeks later...

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:

image.thumb.png.a2bb2e5ed8e646ae27b6f10eeb55cdee.png

image.thumb.png.785b7d872ea3b46f4ab0deacd62ec2ea.png

Link to comment
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!

Link to comment
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!!

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...