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 15 posts - 1 through 15 (of 29 total)
  • Author
    Posts
  • wrik1986
    Participant
    Post count: 2

    Is it possible to set Content Boxes so that they expand vertically to the same height?

    As you can see in the picture, the 3rd box is shorter because it contains less text :-/

    Image: https://postimg.cc/5Xm35cHv

    mtk67
    Participant
    Post count: 3

    I have the same problem and question. And if I’m lucky enough to get the boxes to line up at one screen resolution, it invariably breaks when I size the window to another screen resolution. I need these to have equal heights at whatever resolution a user may be viewing the page.

    I tried setting the container properties to use equal column heights but that seems to not have the desired effect.

    Michael
    Keymaster
    Post count: 469

    Hi @wrik1986 & @mtk67

    Our development team has this in our Git schedule to implement, it is an important feature, to be able to set equal heights for content boxes. In the meantime you can use some CSS.

    – Edit the Content Box Element and add to the CSS Class field -> cbequalheight

    – Add the following CSS to your Theme Options > CSS Section:

    .cbequalheight .fusion-column, .cbequalheight .col.content-wrapper-background {
        min-height: 450px;
    }

    Adjust the min-height pixel value to whatever suits your needs

    If you need further assistance or have any further questions, please create a support ticket using the link below and our support team will gladly assist you

    Click Here To Get Avada Support

    We look forward to helping you!

    Thank you kindly

    mtk67
    Participant
    Post count: 3

    Thanks for the quick reply and workaround. I’m glad to hear the capability is coming.

    I tried the workaround but it doesn’t seem to be working for me. I’ll open a support ticket.

    wrik1986
    Participant
    Post count: 2

    Thanks Michael,

    That work around worked for me.

    I just set a generous min-height and then vertically centre aligned the content ūüôā

    mipham
    Participant
    Post count: 1

    Thank you very much for the question and mainly for the answer, very helpful and it works.

    leoludwig
    Participant
    Post count: 2

    There is another workaround if this solution doesn’t work for you or if the content inside the boxes changes often. Create a container with the number of columns you want, set equal height on the container, add 1 content box in each column and have the column hold the background color

    GateHouse
    Participant
    Post count: 2

    This isn’t working for me either.

    GateHouse
    Participant
    Post count: 2

    CSS file wasn’t updating. Working now.

    IRISNL
    Participant
    Post count: 1

    Is the option to set an equal height on content boxes already implemented? If not when will this be available?

    alexander_sp
    Participant
    Post count: 11

    It does not work for me either,
    can we give an effective solution?

    the box problem is here: https://cfblasant.com/portfolios/cilindros-hidraulicos/

    thanks in advance

    marklchaves
    Participant
    Post count: 337

    @alexander_sp,

    Actually, it looks like it’s working fine. The content in your first three boxes just need to be pushed down 15% below your headings. E.g.,

    padding-bottom: 15%;

    Or, see if you can get your third heading to fit into two lines.

    There are probably more and better ways to do this. This is just my quick & dirty (slight CSS hack) because I see that your boxes are all equal height. When I added a 15% bottom padding to your H2s, the content below lined up perfectly with your fourth column. That should mean the CSS provided above is working fine?

    I hope that helps.

    alexander_sp
    Participant
    Post count: 11

    Many Thanks @mark

    I also thought the same thing, but if I do that, then the mobile version will distort the elements and it will look bad.

    Any other idea please!
    Thanks in advance
    Alexander

    marklchaves
    Participant
    Post count: 337

    @alexander_sp

    Again, I’m sure there are a few ways to solve this. I would read-up on aligning things with CSS (maybe take a class or hire a pro).

    Try playing with repositioning the button so it’s at the bottom of your equal height columns. Here’s an example.

    
    fusion-button-wrappercenter {
      position: absolute;
      bottom: 0px; /* Ground the button to the bottom. */
      width: 100%; /* Make sure the button spans the width of the parent. */
    }
    
    

    Anyone else have their fave solution to equal heights?

    Thanks!
    @marklchaves

    alexander_sp
    Participant
    Post count: 11

    thanks a lot @mark

    but don’t work.
    A theme as AVADA should have a solution to these problems in an updated always. Anyway…..

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