Adjust size of buttons

[itecs]

Hi there,

how can I adjust the size of the buttons, so that “Individuelle Schulung” and “Inhouse Schulung” are the same size?

The URL is www.itecs-training.com/schulungen

Thanks for your help!

Regards,

[tristup]

Hi @itecs,

Seems you are using WP Bakery Page builder,
you can make the buttons in same width by adding a class into the Inner Column.

After that you need to add a small piece of CSS code to get the exact output.

Remember that the following code will work if copied as it is and dont conflict with any existing style.
To modify it further you can check this resource to learn more.

.btn-fullwidth .vc_column-inner .wpb_wrapper .vc_btn3-container {
  width: 100%;
}

.btn-fullwidth .vc_column-inner .wpb_wrapper .vc_btn3-container .vc_btn3{
  width: 100%;
}

NOTE : Here I have added a class btn-fullwidth to the inner column.

Please note that the code provided serve only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle. We do not provide support for custom codes that means we can’t fix it in case it conflicts with something in your site nor will we enhance it.

Hope it helps.

Thanks

[itecs]

Hi,

thanks for you help, but it doesn’t work:

I inserted the code via copy and paste. Do you have an idea, why it is not working?

Thanks!

Regards,

[marc_a]

@itecs,

To help you further about your concern please provide us the link to your website.

Thank you.

[tristup]

Hi @itecs,

The CSS code is found in you sepcified page. But the class is not there in the specific element.

Screenshot 1 : At our end, with the class mentioned

Screenshot 2: At your end, class is not in the position.

Screenshot 3 : when I added the class using dev tool, it works.

Hope I am able to explain this.

Thanks

[itecs]

Hi,

I am afraid I don’t understand the point - I am no expert in Website Design.

I inserted the code in the section “Global CCS” via the customizer. If I understand correctly, that ist the wrong place to insert the code? I need to insert the code using “dev tool”? Where can I find “dev tool” to insert the custom code?

Regards,

[friech]

Hi @itecs,

Sorry about the confusion, WPBakery’s button element has a Size option, please see the following documentation.

https://kb.wpbakery.com/docs/learning-more/content-elements/#ContentElements-Button

Now, since you want the button to be the same size (even though they are not same in text length), you need to use a custom CLASS and to write a custom CSS. To do this, add a class to both of your Button.

Then use that class to target those buttons on your custom CSS.

e.g.

.my-custom-button {
	width: 300px !important;
}

More details about CSS width property.

You can add custom CSS either on Theme Options > CSS or on the Page Custom CSS area.

Please do note that we do not really provide custom CSS here, the given CSS above is only a guide, it would ultimately be your responsibility to take it from here.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

I would also advise if you’re just starting building your site, you might want to consider using the native Content builder of X (the Cornerstone) for creating your pages instead of the Visual Composer. In Cornerstone, the Button element has a width option among other options, so you do not need to write a custom CSS to adjust its width.

Builders 101
Creating Layouts
Adding Elements

Hope it helps,
Cheers!