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

Minimize space between buttons via CSS


Question

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

5 answers to this question

Recommended Posts

  • 0
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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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
  • 0
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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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