tbinns Posted January 26, 2022 Share Posted January 26, 2022 Site URL: https://www.lynwoodsuccession.com/ Hello, I am trying to make all form buttons on my main page the same width regardless of text length. I can not figure out what custom css will help me do this. Any help is appreciated SquareRefresh 1 Link to comment
SquareRefresh Posted January 26, 2022 Share Posted January 26, 2022 1 hour ago, tbinns said: Hello, I am trying to make all form buttons on my main page the same width regardless of text length. I can not figure out what custom css will help me do this. Hey @tbinns try to add next code in Custom CSS: [data-section-id="613ba7bf09b510351f59f447"] { .sqs-block-button-element, .lightbox-handle { box-sizing: border-box; width: 100% !important; } } SquareRefresh, premium plugins & templates that have an elevated feel. Plugins: Have your site stand out. Templates: Our templates are designed with versatility in mind.Get Freebies: Sometimes things in life are free. Browser our hand selected free plugins. Link to comment
tbinns Posted January 26, 2022 Author Share Posted January 26, 2022 This worked perfectly for the form boxes width to all match. Thank you! Can I change 'width' to 'height' to make adjustments the same way to match nearby buttons ? Link to comment
JasminMunich Posted January 29, 2022 Share Posted January 29, 2022 Hi there, I also would like to adjust the height and width of the buttons so that they are always the same (both on the home page and on the about page). Unfortunately, the code did not work for me. I would also like to have the border line as thin as the header line. and I've seen that the "production" button on the about page moves weirdly to the right on smaller devices. Maybe you can help @SquareRefresh? Thanks in advance! Site link is https://diedesignwerkstatt.squarespace.com/ Password: test123 Thanks! Jasmin Link to comment
JasminMunich Posted January 29, 2022 Share Posted January 29, 2022 Btw: I want to change the button border line in general to 1px. Link to comment
tuanphan Posted January 30, 2022 Share Posted January 30, 2022 12 hours ago, JasminMunich said: Btw: I want to change the button border line in general to 1px. #1. It looks like you solved? #2. With button, add this CSS .button-block a { border-width: 1px !important; } 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
JasminMunich Posted January 31, 2022 Share Posted January 31, 2022 On 1/30/2022 at 1:03 AM, tuanphan said: #1. It looks like you solved? #2. With button, add this CSS .button-block a { border-width: 1px !important; } Thanks for your help! 🙂 The code worked fine for one button, but I want all buttons to have 1px border line. Could you also help here? Regarding #1: I had to change the header style from dynamic to style, that's why the thin line is no longer adjusted. But I would like to have it again after the header in 1px colour #oooooo. On the about page the button problem is still there. On smaller devices, the buttons move to the right and are no longer centred. What could be the reason for this? Thank you so much! Link to comment
JasminMunich Posted January 31, 2022 Share Posted January 31, 2022 1 minute ago, JasminMunich said: Thanks for your help! 🙂 The code worked fine for one button, but I want all buttons to have 1px border line. Could you also help here? Regarding #1: I had to change the header style from dynamic to style, that's why the thin line is no longer adjusted. But I would like to have it again after the header in 1px colour #oooooo. On the about page the button problem is still there. On smaller devices, the buttons move to the right and are no longer centred. What could be the reason for this? Thank you so much! And I could't solve the problem with the same button width & height. Maybe you can help here as well 🙂 Link to comment
tuanphan Posted February 4, 2022 Share Posted February 4, 2022 On 1/31/2022 at 2:11 PM, JasminMunich said: Thanks for your help! 🙂 The code worked fine for one button, but I want all buttons to have 1px border line. Could you also help here? Regarding #1: I had to change the header style from dynamic to style, that's why the thin line is no longer adjusted. But I would like to have it again after the header in 1px colour #oooooo. On the about page the button problem is still there. On smaller devices, the buttons move to the right and are no longer centred. What could be the reason for this? Thank you so much! The code affect Button Blocks only. If you share link to all pages where you use button. I can check their button code easier. With about buttons height, add this to Design > Custom CSS /* Buttons height */ @media screen and (min-width:992px) { div#page-section-61c2119f3f32f209229a1dd4 .image-button a { min-height: 50px; display: flex; align-items: center; justify-content: center; } } 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment