Topic: Control space between stacked buttons(only for Art version 2) « SeaTheme

This topic has 7 replies, 2 voices, and was last updated 7 years, 1 month ago by SeaTheme.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
May 3, 2019 at 5:23 pm #18398

Vax
Participant

Purchased
Expired

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.

WordPress Customization Service from $49 Only! Save your expensive time!

May 3, 2019 at 5:24 pm #18399

Vax
Participant

Purchased
Expired

This reply has been marked as private.

WordPress Customization Service from $49 Only! Save your expensive time!

May 4, 2019 at 1:56 pm #18400

SeaTheme
Keymaster

Purchased
Expired

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

WordPress Customization Service from $49 Only! Save your expensive time!

May 4, 2019 at 5:24 pm #18405

Vax
Participant

Purchased
Expired

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.

WordPress Customization Service from $49 Only! Save your expensive time!

May 5, 2019 at 1:37 am #18414
SeaTheme
Keymaster

Purchased
Expired
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; }
}
```
WordPress Customization Service from $49 Only! Save your expensive time!

May 5, 2019 at 5:42 pm #18419

Vax
Participant

Purchased
Expired

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?

WordPress Customization Service from $49 Only! Save your expensive time!

May 5, 2019 at 6:13 pm #18420

Vax
Participant

Purchased
Expired

Also can the button link open in a new window?

WordPress Customization Service from $49 Only! Save your expensive time!

May 6, 2019 at 3:28 am #18431
SeaTheme
Keymaster

Purchased
Expired
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
WordPress Customization Service from $49 Only! Save your expensive time!
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.