Home Forums Art WordPress Theme Control space between stacked buttons(only for Art version 2)

This topic contains 7 replies, has 2 voices, and was last updated by  SeaTheme 6 months, 2 weeks ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #18398

    Vax
    Participant
    Purchased

    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.

    #18399

    Vax
    Participant
    Purchased
    This reply has been marked as private.
    #18400

    SeaTheme
    Keymaster
    Purchased
    Supported

    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.comTwitterFacebook

    #18405

    Vax
    Participant
    Purchased

    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.

    #18414

    SeaTheme
    Keymaster
    Purchased
    Supported

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

    Vax
    Participant
    Purchased

    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?

    #18420

    Vax
    Participant
    Purchased

    Also can the button link open in a new window?

    #18431

    SeaTheme
    Keymaster
    Purchased
    Supported

    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

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

You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!