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

Reduce padding between blocks


Guest
Go to solution Solved by Guest,

Question

Guest

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 Guest
Link to post
  • Answers 15
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 a

15 answers to this question

Recommended Posts

  • 9
Guest

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!

Link to post
  • 1

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


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


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

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

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

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?

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

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