Content Box how to align buttons at end of Box

[dekofee]

#874550

Hi all,

can someone please help me to get the correct css code to align the buttons of the content box at the end of the box?
We have 3 content boxes in 3 columns, they have equal height, but the buttons are at different positions because they follow directly after the content inside the box.
It would be nicer to have them all at the end of the box.

Thanks for any advice or help!

[dekofee]

#874556

I tried with this

.fusion-read-more-button {
position: absolute;
bottom: 15px
}

which helps to get it at the bottom. But I cant get it centered. left:50% or anything with px will not make all buttons equally centered. Thanks!

[marklchaves]

#874582

Hey @dekofee,

You can try wrapping the button with a display: flex div instead of position: absolute. Then position the button using flex: 1, align-items: flex-end, and justify-content: center.

You can see how that works in this how-to guide.

Shout if you have any questions 🙂

Cheers!

[dekofee]

#874602

Hey Mark, thanks!

I tried it out with this

.referenzen-box .fusion-read-more-button {
display: flex;
flex: 1;
align-items: flex-end;
justify-content: center;
}

but it only makes the buttons a bit wider, not putting them at the end of the box. I checked the how-to-guide, it should work with flex: 1 right? What am I a missing? Any idea?
Thanks!

[dekofee]

#874639

Hey @marklchaves,

sorry, I didn’t mark you in the reply. Maybe you didn’t get a notification for the reply in that case.

Thanks for your help!

Best regards
Arno

[marklchaves]

#874816

Hi @dekofee,

Thanks for the follow-up. It’s tough to diagnose what’s going on without seeing your page.

The CSS snippet you shared looks OK. I’d try to make sure your column containers are flexboxes. If there aren’t or there are other containers around the content that aren’t flex, then you’ll get what you’re seeing now.

You can play around with the live demo to see what works and what doesn’t work in real-time.

https://codepen.io/marklchaves/pen/xoNPEQ

I wish I could help more.

Cheers!

[dekofee]

#874999

Hi @marklchaves,

thanks for getting back to this. I am not really good at coding, I just use the Avada System and build the items accordingly. I tried around all kind of things now but probably I am just missing something basic.

You can see the page online at the URL fp.vision

Thanks!

Arno

[marklchaves]

#875066

Hey @dekofee,

I think I see the issue. Unfortunately, working with page builders makes simple HTML edits very challenging.

First: The immediate parent div of each content box needs to be flex. The one above it is, but that doesn’t help in this case.

https://jmp.sh/HtzCPNg

Second: You need to create a wrapper div around your link button and assign your referenzen-box class to that wrapper div.

https://jmp.sh/CxjK8Ac

Here’s the result.

https://jmp.sh/y0pA8lL

Here’s the full source code with my instructions.

<style>
  /* Wrap your button link with your referenzen-box class. See the HTML below. */
  .referenzen-box {
    display: flex;
    flex: 1; /* Take up all remaining space. */
    align-items: flex-end; /* Push the button down. */
    justify-content: center; /* Put the button in the center. */
  }
</style>
<!-- This div needs to be display: flex with flex-direction: column. -->
<!-- See the last 2 rules in the style attribute below. -->
<div
  class="col content-box-wrapper content-wrapper-background content-wrapper-boxed link-area-link-icon link-type-button icon-hover-animation-none fusion-animated"
  style="background-color: rgb(165, 200, 225); min-height: 390px; height: auto; overflow: visible; visibility: visible; animation-duration: 2s; display: flex;flex-direction: column;"
  data-animationtype="flipiny" data-animationduration="2.0" data-animationoffset="top-mid-of-view">
  <div class="heading heading-with-icon icon-left"><a class="heading-link"
      href="https://www.linkedin.com/in/martin-kopf-28b2a672/" target="_blank" rel="noopener noreferrer">
      <div class="icon" style="-webkit-animation-duration: 500ms;animation-duration: 500ms;"><i
          style="border-color:#ffffff;border-width:0px;background-color:#ffffff;box-sizing:content-box;height:50px;width:50px;line-height:50px;top:-75px;margin-left:-25px;border-radius:50%;color:#053c5a;font-size:25px;"
          aria-hidden="true" class="fontawesome-icon fa-linkedin fab circle-yes"></i></div>
      <h2 class="content-box-heading" style="font-size:24px;line-height:29px;">LinkedIn</h2>
    </a></div>
  <div class="fusion-clearfix"></div>
  <div class="content-container" style="color:#ffffff;">
    <p><span class="TextRun SCXO134700409 BCX0" xml:lang="DE-DE" data-contrast="auto" lang="DE-DE"><span
          class="NormalTextRun SCXO134700409 BCX0">Meine berufliche Vita sehen Sie u.a. auch auf LinkedIn</span></span>
    </p>
  </div>
  <div class="fusion-clearfix"></div>
  <!-- Wrap your button link in a div and make that div flex. -->
  <!-- Use your. referenzen-box CSS class. -->
  <div class="referenzen-box">
    <!-- Remove the flex CSS from the button link. -->
    <a class="fusion-read-more-button fusion-content-box-button fusion-button button-default fusion-button-default-size button- button-flat"
      href="https://www.linkedin.com/in/martin-kopf-28b2a672/" target="_blank" rel="noopener noreferrer"><span
        class="fusion-button-text">LinkedIn</span></a>
  </div>
  <div class="fusion-clearfix"></div>
</div>

I hope that helps. Shout if you have any questions 🙂

[dekofee]

#877291

Hey @marklchaves,

thanks a lot for you help. Sorry for the delay, the project was on hold until now.

I tried your code, copied it into the css field of the avada builder of the relevant page, but unfortunately nothing is changing.

When I inspect the code, I think the code you gave me adds codee before everything else, not replacing the code for the boxes. So the new part with the div of my referenzen-box class is not showing anything on the left side.

Sorry to be so annoying, its a hard life if you dont know enough about coding 🙂

[marklchaves]

#877353

Hi @dekofee,

My bad. I should have been more clear. I didn’t mean (nor mention) to copy/paste code anywhere. I just gave you what the code needs to look like to do what you want.

Again, this is the problem with page builders. The code is simple. But now, you need to translate the code example I gave you into the Avada builder.

For example, my first instruction means you need to add flex to the wrapper of each content box. You might need to actually create column containers for each one. The second instruction means you need to do something similar with your buttons except your adding your custom class.

The concept is simple, right? Translating that into Avada isn’t.

Again, you’ll need to work with Avada elements not copying pasting code. I hope that makes sense. Maybe try out the concept on a very simple test page first. Once you get that working you can “port” (i.e., migrate) that work to your live page.

If you’re still getting stuck, I’d work with your web developer to make sure Avada builder outputs something very similar to the example code result I shared earlier.

The other option asking Avada Support to help you. This is really basic stuff that an advanced page builder should handle.

I hope that helps!

Have a great weekend 🙂

[Author]

Posts