Jump to content

Adapt button padding via CSS

Recommended Posts

Site URL: https://www.adaniabutto.com/

Hi,

I'm trying to set the top padding of a specific button (button-block-yui_3_17_2_1_1641237084533_45554-0) on my website to 0px. It's currently at 30px. I only want to change the padding of this single specific button, not in general.

I added the custom CSS below to my page via the settings page, but nothing happens, and I don't understand why. The CSS selector was copied directly from the browser inspector, so it can't be a typo:

#button-block-yui_3_17_2_1_1641237084533_45554-0 {
            padding-top: 0px; /* was previously 30px */
            padding-bottom: 30px;
            padding-left: 0px;
            padding-right: 0px;
          }

When I make this change in the browser inspector, I get the desired result (the top padding is set to 0 on my website), but nothing happens when I do the exact same thing on my actual Squarespace page.

I have tried multiple variations, e.g. code injection in the header with the appropriate code (<html>, <style>, etc), but the website simply doesn't change. What am I missing?

Thanks!

Edited by ottuba
Forgot post tags
Link to comment
2 hours ago, ottuba said:

Site URL: https://www.adaniabutto.com/

Hi,

I'm trying to set the top padding of a specific button (button-block-yui_3_17_2_1_1641237084533_45554-0) on my website to 0px. It's currently at 30px. I only want to change the padding of this single specific button, not in general.

I added the custom CSS below to my page via the settings page, but nothing happens, and I don't understand why. The CSS selector was copied directly from the browser inspector, so it can't be a typo:

#button-block-yui_3_17_2_1_1641237084533_45554-0 {
            padding-top: 0px; /* was previously 30px */
            padding-bottom: 30px;
            padding-left: 0px;
            padding-right: 0px;
          }

When I make this change in the browser inspector, I get the desired result (the top padding is set to 0 on my website), but nothing happens when I do the exact same thing on my actual Squarespace page.

I have tried multiple variations, e.g. code injection in the header with the appropriate code (<html>, <style>, etc), but the website simply doesn't change. What am I missing?

Thanks!

Kindly try in Home > Design > Custom Css

#button-block-yui_3_17_2_1_1641237084533_45554-0 {
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.thumb.png.6390e78f09f0bbd2499e4616fba12233.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
1 hour ago, bangank36 said:

Kindly try in Home > Design > Custom Css

#button-block-yui_3_17_2_1_1641237084533_45554-0 {
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Ahh, of course, thank you! Not sure what other styling rule there was to override, but that's good enough for me :)

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.