Home Forums Community Forum How to set equal height on Content Boxes

Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.
Viewing 14 posts - 16 through 29 (of 29 total)
  • Author
    Posts
  • marklchaves
    Participant
    Post count: 339

    Hey @alexander_sp,

    Apologies. I missed the leading period in the CSS for the fusion-button-wrapper class. It should be

    
    .fusion-button-wrapper
    

    Here’s the correct code. Please try this again by adding it to the Custom CSS field in your https://cfblasant.com/portfolios/cilindros-hidraulicos/ page.

    
    /* Select the fusion-button-wrappercenter class. */
    .fusion-button-wrappercenter {
      position: absolute; /* We need to be absolute here to push the button down. */
      bottom: 0px; /* Ground the button to the bottom. */
      width: 100%; /* Make sure the button spans the width of the parent. */
    }
    
    
    alexander_sp
    Participant
    Post count: 11

    many thnaks @marklchaves

    I put the CSS class in each of the boxes “.fusion-button-wrapper” with point and without point (image attaches)
    https://cfblasant.com/boxes.jpg

    And then I changed the custom CSS code (theme options):

    /* Select the fusion-button-wrappercenter class. */
    .fusion-button-wrappercenter {
    position: absolute; /* We need to be absolute here to push the button down. */
    bottom: 0px; /* Ground the button to the bottom. */
    width: 100%; /* Make sure the button spans the width of the parent. */
    }

    marklchaves
    Participant
    Post count: 339

    Hi @alexander_sp,

    No need to add CSS into each of the boxes. These boxes should already contained in the built-in fusion-button-wrappercenter CSS class.

    Ok. Let’s do this. All you need to do is add the CSS code I shared with you earlier. Plus a media query I added at the top for you. Because mobile devices don’t need this custom CSS. You can test this easily.

    Add this CSS exactly as it is.

    
    /* 
     * This custom CSS is not needed for handhelds.
     * So add a media query to run only for large displays.
     */
    @media only screen and (min-width: 1025px) {
      /* Select the fusion-button-wrappercenter class. */
      .fusion-button-wrappercenter {
        position: absolute; /* We need to be absolute here to push the button down. */
        bottom: 0px; /* Ground the button to the bottom. */
        width: 100%; /* Make sure the button spans the width of the parent. */
      }
    }
    

    To this page (as mentioned earlier).
    https://cfblasant.com/portfolios/cilindros-hidraulicos/

    See this image to find out where to add it to your cilindros-hidraulicos page.
    https://theme-fusion.com/wp-content/uploads/2018/11/doc_fusion_builder_admin_bar_custom_css.jpg

    Read full documentation if needed here.
    https://theme-fusion.com/documentation/avada/how-to/how-to-apply-custom-css/

    Once you add this CSS (it must have the leading .), your equal height column boxes will look like this.
    https://imgur.com/a/bma9gkO

    Hope this is what you want! 😉

    If you are not comfortable with this, please consult a professional (there are plenty of us freelancers that can do this quickly for you). It will be worth the investment. Especially if my code has another typo. If you know CSS you can debug small errors quickly (like my missing period earlier–easy one to spot). If I was working on this for you, all this work to align your buttons could been done if five minutes.

    Good luck!

    alexander_sp
    Participant
    Post count: 11

    Dear @marklchaves

    I do not understand don’t work, there is no way.
    anyway I thank you very much.
    mmm … How much does it cost me if I contract you to solve it?

    Alejandro

    Anthony
    Participant
    Post count: 1

    Any update regarding when/if this will be implemented in a future update? In “Blog” element setting there is an “Equal Heights” toggle which manages to display content with equal heights in grid, this would be ideal solution.

    alexander_sp
    Participant
    Post count: 11

    Well, it’s taking a long time to get that update to solve an impotant problem

    marklchaves
    Participant
    Post count: 339

    Hi Everyone,

    Since this is a popular topic (not just for Avada), I’ve posted on my blog one of my solutions for equal height content boxes.

    There are two parts. Part one describes the problem and outlines the columns involved.

    https://marklchaves.com/equal-height-columns-out-of-the-box-content-boxes/

    Part two provides one solution (I think the easiest one if using Avada). Jump right here for the spoiler.

    https://marklchaves.com/equal-height-columns/

    I’ve also worked on flexbox solution if there are any CSS geeks reading. I found out later that this is very similar to what the Divi folks have done to solve this problem. I’ll do an Avada write-up on this alternative approach when I have a moment. But for now, the code is up on CodePen.

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

    Any questions or comments, please send them my way! 😉

    mrsnak
    Participant
    Post count: 7

    Hi Mark, none of the solutions work for me. Need one that targets specific content boxes. The first one in the thread should have worked, but not for me. Support tix usually take a full day to get back because techs for me are all middle east based.

    alexander_sp
    Participant
    Post count: 11

    Me too

    mrsnak
    Participant
    Post count: 7

    Mark, I’ve been trying to push buttons down on my page columns, and your CSS does not seem to be working:

    /* Select the fusion-button-wrappercenter class. */
    .fusion-button-wrappercenter {
    position: absolute; /* We need to be absolute here to push the button down. */
    bottom: 0px; /* Ground the button to the bottom. */
    width: 100%; /* Make sure the button spans the width of the parent. */
    }

    Any idea what might be disabling it?

    https://chambermusicsedona.org

    marklchaves
    Participant
    Post count: 339

    Hi @mrsnak,

    Thanks for posting. I appreciate your comment on my code.

    It helps to understand CSS and how to use the Chrome or Firefox dev tools. So, you can look at CSS examples and tailor them for your own needs.

    In your case, the CSS will differ from my previous post(s). The code below should work for the New Season Concerts section (thanks for supplying the link–I love Sedona!).

    Here’s the screen capture to prove it (notice how Firefox tells you what CSS class you’re looking at). Also tested on Chrome with no issues.

    https://imgur.com/a/84ywcFn

    
    .fusion-button-wrapper .fusion-aligncenter {
        position: absolute;
    
        /* Ground the element 5 px from the bottom. Adjust as needed. */
        bottom: 5px;
    
        /* Centre the element. */
        right: 0;
        left: 0;
    
        /* Uncomment to stretch the element if needed. */
        /* width: 100%; */
    }
    
    

    Special Event Salons
    This section, I think you need to set the columns to equal height (or recheck what’s going on there). The heights don’t look equal here. When you make them equal, make sure you have enough space for the button and the 5 or so extra pixels. Then apply the same or similar CSS to your New Season Concerts section that I gave you above.

    Share & enjoy!

    marklchaves
    Participant
    Post count: 339

    @mrsnak,

    Oh, just to be clear. The media query I gave in previous examples still applies in your case. You’ll only need to force the button down for larger screens. So, please use this media query to enforce this rule.

    @media only screen and (min-width: 1025px)

    Full CSS with Media Query

    
    /* 
     * This custom CSS is not needed for handhelds.
     * So add a media query to run only for large displays.
     */
    @media only screen and (min-width: 1025px) {
      .fusion-button-wrapper .fusion-aligncenter {
          position: absolute;
    
          /* Ground the element 5 px from the bottom. Adjust as needed. */
          bottom: 5px;
    
          /* Centre the element. */
          right: 0;
          left: 0;
    
          /* Uncomment to stretch the element if needed. */
          /* width: 100%; */
      }
    } /* End media query. */
    
    
    marklchaves
    Participant
    Post count: 339

    Finally got around to writing-up how to achieve equal height columns using CSS flexbox in AVada.

    https://marklchaves.com/equal-height-columns-using-flexbox/

    Enjoy!

    exceladvisors
    Participant
    Post count: 6

    Would love to see a solution to this also. One click and done solution inside the builder would be great.

Viewing 14 posts - 16 through 29 (of 29 total)
Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.