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

Reduce padding between blocks

Question

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!

Edited by socialitestyle

Share this post


Link to post

14 answers to this question

Recommended Posts

  • 8

Hoorah! After hours of searching and finally asking the question, I figured it out! Just sharing for anyone else looking to accomplish this.

The CSS to define the blocks is ".sqs-block". At margin of 0px you get the default so you have to set the margin to negative values. So basically:


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

NOW...keep in mind you have to do the right AND left (or top and bottom) so one block doesn't force the other to the default position. This will also reduce outside page margin so if you want to keep that wider than the space between boxes you need to increase the page margin in the style editor by the same amount you decreased in your css (i.e. +10 in this example).

Hope it helps!

Share this post


Link to post
  • 1

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.

Share this post


Link to post
  • 1

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

margin-top: -10px;

Edited by odyboards
Initial Revision

Share this post


Link to post
  • 1

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>


Edited by grnenvy

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

@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! :)

Share this post


Link to post
  • 0

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


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


Share this post


Link to post
  • 0

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


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


Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • -1

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

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