How to align buttons

[Jennine]

Can you please tell me how to align the gold buttons while keeping the top aligned as well? (thrid section of the home page)
Here is the url: https://warriorsofstone.com/

thank you

[tristup]

Hi Jennine,

Thanks for reaching out.
The problem is due to the different height of the Row just under the image. I would suggest you add the same class to each Row and add the following code into the Theme Options > JS. I have created the code by assuming the content-div class has been added to that Row element.

    jQuery(document).ready(function($){	
        var max=0;
        jQuery(".content-div").each(function(index, el) {
            console.log( jQuery(el).height() );
        
            if( jQuery(el).height() > max ){
                max = jQuery(el).height() + 20;
            }
        });
        jQuery(".content-div").css('height', max);
    });

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it. Further customization should be directed to a third-party developer or you can avail of One, where we answer the questions beyond normal theme support.

Thanks

[Jennine]

hello, thanks for your response. I implemented the code and the class however it didn’t work. Did I do something wrong?
Thank you

[ruenel]

Hello @Jennine,

You can also do this:
1.) Enable the Flexbox option in your Column element.
2.) The Last Row element which you have inserted in the column must have a 0 bottom margin.

To fully understand how flexbox works, please check this out:

How to Make Equal Height Columns w/ Buttons Anchored to the Bottom in WordPress

If the above suggestion does not help or does not make sense, please provide us with your WP Access so that we can create an example demo for you.

Best Regards.

[Jennine]

That worked thanks. However, I would like the buttons to be aligned right. as shown in the previous screenshot. they are all aligned at the bottom properly now but they are left aligned. https://warriorsofstone.com/

[prakash_s]

Hello @Jennine,

I would suggest you go to the container DIV element -->Flexbox —> Horizontal —>End. Please have a look at the given screenshot below.

Hope it helps
Thanks

[Jennine]

hello,
After moving it to end, the button moves which is great but the title is also moving to the right which i dont want. The text in the middle remains left aligned. Please advise. Thank you

[tristup]

Hi @Jennine,

To avoid that you can follow two different ways, 1st you can move the title out of that specific DIV where you have applied the Flexbox > Horizontal > End. And add that in another DIV element. The 2nd you can do the same with the Button element.

Hope it helps.
Thanks