Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
Sign in to follow this  
Laurenanne

How can I reduce space between "buttons"?

Question

Hello,

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

Edited by Laurenanne

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 0

As its a new feature i'd suggest you contact support, maybe there is a chance they will change the code given its a new feature. I actually think it looks about right. 2mm would be too close.

Share this post


Link to post
  • 0

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:


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

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.

Share this post


Link to post
  • 1

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


Share this post


Link to post
  • 0

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:


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

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


<style>
#block-80066b6609382a56d550 { 
padding-top: 17px; 
padding-bottom: 0px;
}
</style>



Share this post


Link to post
  • 0

Hello -

How can I reduce space on a Cover Page between text and the button box? Thank you.

www.sugarchecked.com I want everything to fit into one page when loaded, not to scroll for social buttons et cetera.

Thank you!


www.migrainechecked.com and www.sugarchecked.com as well.

Share this post


Link to post
Guest
This topic is now closed to further replies.
Sign in to follow this  

×
×
  • Create New...