Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #721011

    Hi guys,

    Im using 2 side by side full width buttons in a color separated by anothe 1/3 element.

    like this:

    1/3 button (contact us) 1/3 text (or) 1/3 button (call us)

    The gap between them is huge. Any ideas as there’s no alignment option using full widht buttons but these look better.

    Thanks

    #721210

    Hey robertscott!

    To center the buttons we have added the below css

    
    /* Button alignment */
    .btn-group{
    display:flex;
       justify-content: center;
    }
    .btn {
    margin: 0 10px;
      max-width:350px!important;
      min-width:300px!important;
    }
    .avia-button-center{
    display:inline-block!important;
    }
    @media only screen and (max-width:768px) {
    .btn-group{
    display:inline-block!important;
    text-align:center;
    }
    .btn {
    margin: 10px 0;
    }
    }

    And made small modification to the way the buttons are structured in advanced layout builder.

    We enabled custom css classname support and added the classname .btn for the buttons and .btn-group to the 1/1 row which contains the buttons.

    Regards,
    Vinay

    #721434

    Thats awesome vinay, much appreciated.

    If I wanted to to imcrease the gap slightly what would I change?

    And if i wanted to add an element between them that I had before? contact us “or” get in touch

    CHeers

    #721437

    Hi Vinay,

    I just edited the white space element to increase but now the section is messed up?

    #721639

    Hi Vinay,

    I think I was still logged in on my end and made an edit. I think this overides your changes? Sorry man my bad.

    Can you help?

    #721681

    Hi,

    Please feel free to test it, that’s how you get to make new things :)

    Just noticed you added .btn as class name please remove the . while adding classname and it should work fine.

    To increase the gap between the buttons increase the margin value in the css code

    .btn {
    margin: 10px 0;
    }

    Let me know if you have any questions, Happy to help :)

    Best regards,
    Vinay

    #721922

    Hi Vinay,

    I’ve added another section with a button: “Let’s have a friendly chat”

    I’ve centre aligned the button but it’s way left, why is that?

    Thanks for your help

    #722335

    Hi,

    I checked all the pages did not find any section with 2 buttons on aligned to left. If you have not figured this one please feel free to share the precise link with the heading name to look for under.

    The buttons need to be in a 1/1 row with class name “btn-group” and the button alignment should be center in the edit options.

    Check and confirm the above as always we are happy to help :)

    Best regards,
    Vinay

    #722387

    Hi Vinay,

    Thanks man, I figured it out :-)

    #722798

    Hi,

    That’s great! and glad we could help :)

    Thank you for using Enfold.

    Best regards,
    Vinay

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘section button alignment’ is closed to new replies.