Avada Forums Community Forum Vertically Aligning Button To Bottom of Column

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • brandonpkelly1
    Participant
    Post count: 2

    Greetings,

    How can I align the buttons of my columns to the bottom so they are flush while using equal height containers?

    tsteingard
    Participant
    Post count: 2

    Did you find an option?

    I found one method for another theme framework using absolute positioning. Might try that if there isn’t already a more native solution to this problem.
    https://kriesi.at/support/topic/place-full-with-buttons-at-the-bottom-of-column/

    Jetxpert-Envato
    Blocked
    Post count: 339

    Hi there,

    For Avada users, here’s the solution:

    Note: Solution below assumes you have a container with 3 columns. Each column contains the following elements (in this order, top down): Image, Separator, Text Block, Separator, Button.

    (1) Create a CSS Class name and add it to each column (the wrapping element for each button). We used “align-button-container” (without the quotes) (click here)

    (2) Go to Avada > Theme Options > Custom CSS and add the following CSS code:

    .align-button-container .fusion-button-wrapper {
        display: inline-block;
        position: absolute;
        bottom: 40px;
        left: 0;
        right: 0;
    }

    (3) As required, adjust the “bottom” parameter noted above and margin/padding parameters for the Column and Separator elements to obtain what you need. We always check results using a PC, laptop, and mobile devices.

    Cheers!

    jazzbuzz
    Participant
    Post count: 1

    Hi, this Code does not seem to work in the latest version anymore.
    I set up equal height on WooCommerce Page and the code does not work.

    URL: https://envita-ernaehrungsberatung.com/shop/

    Any other option?

    Thank you very much

    Jasmin

    mrsnak
    Participant
    Post count: 10

    Code no good for current version.

    bionictoe
    Participant
    Post count: 1

    I see in your shop you seem to have figured out this issue. Can you share with me how you managed it?

    It looks very good

    Jetxpert-Envato
    Blocked
    Post count: 339

    @jazzbuzz,

    Looks like you got it to work using another method. Can you share it?

    The method we suggested above still works for us.

    Cheers!

    shkou
    Participant
    Post count: 2

    I’ve been using the “fusion-button-wrapper” class for years in my custom CSS, on almost all of my clients’ sites.

    Since the developers deleted the class few months ago, the buttons no longer have wrappers and we can no longer position them via CSS. Instead, we have a “fusion-alignleft”, “fusion-aligncenter” or “fusion-alignright” depending on the positioning chosen in the parameters. Sad. I had to fix all affected sites after the Avada update…

    Unfortunately, the parameter Add a class to the wrapping HTML element doesn’t add the class to the wrapper but to the button itself (“a” tag) so it’s useless.

    teubl
    Participant
    Post count: 2

    Same issue here,

    I’ve fixed it for now by adding:
    – a class to the bottom buttons
    – the following css in our child-theme style.css:

    	position: absolute;
    	bottom: 40px; 
    	left: calc(50% - 69px);}

    * where the 69px is the width of the button, to center the button horizontally

    With this ‘fix’ the button can go over the text above it. To correct that i’ve added a seperator between the text and the button. A bit wobbly, but works afaik.

    Cheers, Ed’

    utopiastudios
    Participant
    Post count: 2

    I was able to make it work with the following in custom CSS for each column:

    .align-button-container .fusion-button {
        display: inline-block;
        position: absolute;
        bottom: 0px;
        width: 83% !important;
    }

    “Width” controls how much of the width of the column you want the button to span. All buttons are set to span the whole width in my case.

    utopiastudios
    Participant
    Post count: 2

    Correction, “width” is the amount of the the inner content of your column relative to the explicit column width, to keep the button centered. If there’s a sexier way to do that I’m all ears!

    stphnwlkr
    Participant
    Post count: 63

    Just use a separator element before the button and set flex-grow to 1

    stphnwlkr
    Participant
    Post count: 63
    microed
    Participant
    Post count: 5

    Using the separator worked for me, thanks!

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.