Control space between stacked buttons(only for Art version 2)

[Vax]

I want to arrange 4 buttons vertically. How can I control the space between the stacked buttons?
Using the page builder the default gap is too big.

[Vax]

This reply has been marked as private.

[SeaTheme]

Hi

Please paste the custom CS code to “Appearance > Customize: Additional CSS”:
.page-id-9102 .btn-mod-wrap .ux-btn { margin-top: 5px; margin-bottom: 0px; }

The CSS will not affect the 1st button, because the 1st is built by Text mod. You could use Button mod also to replace it. The page-id-9102 is the page ID, so the CSS will affect this page only. If you want the CSS to affect all pages, please remove .page-id-9102

Regards!
Bwsm – uiueux.com – Twitter – Facebook

[Vax]

Also, I want the width of the buttons to be responsive. I set the width of the buttons at 680px for desktop but when I view on mobile the buttons do not scale.
Is there a setting that I need to make?
Thanks for the css for the spacing.

[SeaTheme]

Please paste the custom CS code to “Appearance > Customize: Additional CSS”:

@media(max-width:767px) {
.page-id-9102 .entry .btn-mod-wrap .ux-btn { width: 90%!important; }
}

[Vax]

I’m using the css to control the spacing and the responsive display but the buttons are not lining up exactly centre. They are slightly to the right. I don’t understand why?

[Vax]

Also can the button link open in a new window?

[SeaTheme]

Please add the custom CSS:

.btn-mod-wrap.btn-center .ux-btn {
    margin-right: 0; 
    margin-left: 0;
}

Also can the button link open in a new window?

It is not possible by simple custom CSS. Please use custom javascript.
Install a custom js plugin like Simple Custom CSS and JS, put the javascript codes by this plugin(Custom CSS & JS > Add Custom JS):

jQuery(document).ready(function( $ ){
 jQuery('.page-id-9102 .ux-btn').on('click', function() {
    $(this).attr('target', '_blank');
 });
});

The page-id-9102 is the page ID, so the CSS will affect this page only. If you want the CSS to affect all pages, please remove .page-id-9102

[Author]

Posts