Home Forums Community Forum Content Box how to align buttons at end of Box

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • dekofee
    Participant
    Post count: 6

    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
    Participant
    Post count: 6

    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
    Participant
    Post count: 816

    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
    Participant
    Post count: 6

    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!

    Button not aligned to end of box

    • This reply was modified 2 weeks, 2 days ago by dekofee.
    dekofee
    Participant
    Post count: 6

    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
    Participant
    Post count: 816

    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
    Participant
    Post count: 6

    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
    Participant
    Post count: 816

    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 🙂

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