Jump to content

Minimize space between buttons via CSS

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://begonia-garlic-lpx7.squarespace.com

Hiya friends,
Picture attached. I targeted each of these buttons via their block ID's. Reducing the padding works great for vertical but does nothing for horizontal.  Example:  "block-id" {padding: 0 !important}

Adding spacers to the right and left isn't helping either.  I just want them nice and snug together. Usually I can find my answer on the forums, but no luck. Thank you so much for always helping me! 

 

Site: https://begonia-garlic-lpx7.squarespace.com/
pword: yes

 

 

image.png

Link to comment
3 hours ago, elijah_aaron said:

Site URL: https://begonia-garlic-lpx7.squarespace.com

Hiya friends,
Picture attached. I targeted each of these buttons via their block ID's. Reducing the padding works great for vertical but does nothing for horizontal.  Example:  "block-id" {padding: 0 !important}

Adding spacers to the right and left isn't helping either.  I just want them nice and snug together. Usually I can find my answer on the forums, but no luck. Thank you so much for always helping me! 

 

Site: https://begonia-garlic-lpx7.squarespace.com/
pword: yes

 

 

image.png

 

Try this using the block id to isolate the button row row.   This worked for me.

There is a 17px padding on the left and right side of the buttons too.  Hope this helps.

block idxxx {

.sqs-row {

display: flex;
justify-content: center; }

.sqs-col-4 {

width:20%; }

}

Link to comment
  • Solution
2 hours ago, elijah_aaron said:

Thank you for your reply. Unfortunately, that didn't do anything - @tuanphan, any thoughts?

Add to Design > Custom CSS

@media screen and (min-width:768px) {
div#block-yui_3_17_2_1_1656774433360_3160 {
    position: relative;
    right: -100px;
    z-index: 9999;
}
div#block-yui_3_17_2_1_1656774433360_4791 {
    position: relative;
    left: -100px;
 z-index: 9999;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
15 hours ago, elijah_aaron said:

@tuanphan

Your advice worked great, but now I'm encountering this issue on mobile view (picture attached) Anyway to tell them to all be side by side on mobile view?

Thank you for always helping me! I deeply appreciate it!

IMG_89F7384CD2B8-1.jpeg

Use this code 

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

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