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!

• This reply was modified 2 weeks, 2 days ago by dekofee.

[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!

• This reply was modified 2 weeks ago by marklchaves. Reason: Typo

[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 🙂

[Author]

Posts