ottuba Posted January 4, 2022 Share Posted January 4, 2022 (edited) 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 January 4, 2022 by ottuba Forgot post tags Bhavik 1 Link to comment
Beyondspace Posted January 4, 2022 Share Posted January 4, 2022 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 ottuba and Bhavik 2 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Beyondspace Posted January 4, 2022 Share Posted January 4, 2022 My testing ottuba 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
ottuba Posted January 4, 2022 Author Share Posted January 4, 2022 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
weecancuk Posted July 13, 2023 Share Posted July 13, 2023 Hello, I've managed out to code so that the email and subject are on same line but I can't figure out how to get them to line up with the rest of the form. Also, I can't get the padding around the submit button to become smaller (the green). Any suggestions? https://www.anthologyofcrumbs.com/contact Link to comment
tuanphan Posted July 15, 2023 Share Posted July 15, 2023 On 7/14/2023 at 3:25 AM, weecancuk said: Hello, I've managed out to code so that the email and subject are on same line but I can't figure out how to get them to line up with the rest of the form. Also, I can't get the padding around the submit button to become smaller (the green). Any suggestions? https://www.anthologyofcrumbs.com/contact Change nth-child(2) and (3) to this #collection-644983fb4c979540e0556179 .form-item:nth-child(3) { width: calc(~"50% - 10px") !important; } #collection-644983fb4c979540e0556179 .form-item:nth-child(2) { width: calc(~"50% - 10px") !important; margin-right: 20px; } 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
weecancuk Posted July 15, 2023 Share Posted July 15, 2023 7 hours ago, tuanphan said: #collection-644983fb4c979540e0556179 .form-item:nth-child(3) { width: calc(~"50% - 10px") !important; } #collection-644983fb4c979540e0556179 .form-item:nth-child(2) { width: calc(~"50% - 10px") !important; margin-right: 20px; } Thanks for responding. When I put it below all my other css, it makes the email and subject stack each other on the left. This is what I have there now. Do I have to remove this? I tried and replaced with yours but seem to be missing something.... /* These Will Be Beside Each Other */ /* LEFT */ .form-item:nth-child(3) { width: 40% !important; margin-right: 20%; } /* RIGHT */ .form-item:nth-child(2) { width: 40% !important; } } Link to comment
weecancuk Posted July 16, 2023 Share Posted July 16, 2023 got it! Needed an extra closing bracket that I didn't include. tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment