Make width of form button same

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

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;
  }
}

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 ?

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

Btw: I want to change the button border line in general to 1px.

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;
}

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!

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 🙂

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;
}
}