Reduce padding between blocks

Hi,

I have pretty basic knowledge of CSS and have been able to do some tweaking so far, but I can't figure this one out and I've searched all through the forums but no luck:

Is there any way to reduce the padding between blocks? Right now it looks like there's 10px or so space between all blocks (image, text, quote, etc.) and I'd just like to be able to get my elements closer together.

I feel like this should be a simple fix but can't seem to find how to define the command.

Thanks!

Just wanted to follow up on this, if you do do it include the following code:

html, body {
   max-width: 100%;
   overflow-x: hidden;
}

This will prevent the website scrolling horizontally at all.

@Socialitestyle & @MickeyArdell, Where did you insert this piece of code ? I tried both the Settings->Advanced for an individual page and the Design->Custom CSS and neither did anything. I too would like to make those spaces smaller between blocks.

Yes, I need this assistance as well! Thank you!

@Channon, I figured out how this works. Put this code in the Settings>Advanced page. It looks like this :

<style>
 .sqs-block { 
   margin-left: -30px; 
   margin-right: -30px; 
   margin-top -30px; 
   margin-bottom: -30px; 
   } 

< /style>

(Get rid of the space between the "<" and the "/" in the closing "style"). I had to increase the number from -10 to -30 to really notice the difference.

The code that MickeyArdell provided helps if you see a horizontal scroll bar and that goes in the Design>Custom CSS page. It should look like this :

  div { 
   max-width: 100%; 
   overflow-x: hidden; 
 }

@Channon I tried using your code above and it says there's a syntax error on line one (referring to the

@Channon, did you go all the way to Settings->Advanced->Code Injection and put it in the Header?

Also, if you may have to adjust the right & left numbers as I've found the blocks to be too close together.. I just deleted the right & left margins to get what I wanted

This worked for me!Note: There's a syntax error on line 4, it's missing a colon

margin-top: -10px;

@socialitestylePlease fix the missing colon after "margin-top" when you get a chance for users that may not notice why the code isn't working when they first paste it in! :)

For padding between Product Blocks I would like to share the code below:

.sqs-block-product {    padding-left: 0px !important;    padding-right: 0px!important;

There are missing colons in the answers above, try this:

.sqs-block { 
    margin-left: -30px; 
    margin-right: -30px; 
    margin-top: -30px; 
    margin-bottom: -30px; 
    } 

I created a block with custom html and now I want to apply css to reduce the padding between my blocks. However, since the custom code option isn't like a text editor, I don't now how to add the css code suggested above to my html code on my square space page. Any suggestions?

The top answer didn't work for me without adding style tags. The complete code that worked for me is:

<style>
.sqs-block {
margin-left: -30px;
margin-right: -30px;
margin-top: -30px;
margin-bottom: -30px;
}
</style>

Will this work on mobile too?

On 10/7/2014 at 11:29 AM, MickeyArdell said:

Just wanted to follow up on this, if you do do it include the following code:

html, body {
   max-width: 100%;
   overflow-x: hidden;
}

 

 

This will prevent the website scrolling horizontally at all.

@mickeyardell what can I do for my site that is experiencing vertical scrolling in the footer, after restricting the margin between blocks? I want the max height to be the same as the instagram and the footer bar. https://www.moonvalleydesign.co/

On 6/23/2021 at 12:31 AM, alpalbents said:

@mickeyardell what can I do for my site that is experiencing vertical scrolling in the footer, after restricting the margin between blocks? I want the max height to be the same as the instagram and the footer bar. https://www.moonvalleydesign.co/

 

Hi. Which element?

Captions and space between image and text. sections

To add in customs CSS.
It works for me in case of if you want to reduce space between an image (photo) and a new section (text). Just increase or decrease the margin bottom to -15px 

.sqs-block {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: -15px;
}

and this one for the caption text below the image:

.image-caption-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;}