Jump to content

How can I reduce space between "buttons"?

Recommended Posts


I'm after anyone who knows a bit about code, to lead me in the right direction.

I want to reduce the white space/padding between my medium sized buttons. I would ideally like a thin gap, say 2mm between each button block. I will also be adding a third button below the second (only 2 buttons are on the website atm).

Link to buttons (find them at the bottom left of the page): http://laurenannephotography.com.au/lauren/

Shank you, any help would be really appreciated! :)

Link to comment
  • Replies 6
  • Views 23.7k
  • Created
  • Last Reply

I agree with scoobie; they look great. Each of your social buttons has a "margin-right" of 10 pixels.This is what they are now:

.social-facebook, .social-instgram, .social-pinterest, .social-google { margin-right: 10px; }

Copy the code, go to the page called Lauren and click its Page settings. Select "Advanced" and enter that code. Adjust the "10px" to a smaller number.

Link to comment

Hi Lauren, I think you were asking about the New Squarespace Buttons you have for the Gallery & Blog?

If so here is what you want. Of course you can play with the number to get your desired effect.

.sqs-block-button .sqs-block-button-element {
margin: -10px;

You can further customize with block or page ids to isolate to only certain buttons.

I have used the below code here (http://www.abcra.ca/) along with some extra code to give a fixed width and also increase the default font size. I isoloated it to only that button by using the button block id.

#block-7bd8966f6b9959a021c7.sqs-block-button  .sqs-block-button-element {
 width: 869px;
 margin-bottom: -10px;
 font-size: 25px;

Link to comment

Oh. I think I misunderstood your question.

On your page in the bottom-left, you have a block of social icons, a button that says "Visit the Gallery", a button that says "Check out the blog", a "For More Information", and a Horizontal Rule.If you're talking about the vertical spacing between those

the social block is #block-80066b6609382a56d550the "visit the gallery" is #block-20197bb5824e92342eab"check out the blog" is #block-4abbfaddad961a1ed903info is #block-32bfc8ba8fd6000cf1f8horizontal rule is #block-f5e7d108f6c421065491

They all are vertically equidistant with a gap of 17pixels. That gap is their "padding".You can adjust them all together, like this:

#block-80066b6609382a56d550, #block-20197bb5824e92342eab, #block-4abbfaddad961a1ed903, #block-32bfc8ba8fd6000cf1f8, #block-f5e7d108f6c421065491 {
padding-top: 17px !important;

or you may adjust their padding-top or padding-bottom individually, like so:

#block-80066b6609382a56d550 { 
padding-top: 17px; 
padding-bottom: 0px;

Link to comment
  • 1 year later...


This topic is now archived and is closed to further replies.

This topic is now closed to further replies.
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.