Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • April 24, 2016 at 9:52 pm #620880
    luckylobo10

    Hi!

    I have a page with 3 columns and one will with button (read more) at the bottom of each column. The columns have different amount of text so it looks weird with the placement of the buttons. Can you help me place the button at a fixed location at the bottom so it become aligned?

    Thanks!

    April 24, 2016 at 10:06 pm #620885
    Vinay

    Hi luckylobo10!

    Please try the below css in Enfold > General Styling > Quick CSS

    .custom-class  .avia-button-wrap {
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.custom-class .flex_column.av_one_third {
  padding-bottom: 70px !important;
}

    Please NOTE : The above CSS will affect side wide hence we recommend using a custom css class name. To do so first enable CSS classs name support as mentioned here http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Then add a custom class name to the parent element and use the above code.

    Or kindly use the page id class in place of the custom class to make changes only to that page.

    Should look close to the screenshot in private

    Regards,
    Vinay

    • This reply was modified 8 years, 7 months ago by Vinay.
    April 24, 2016 at 10:12 pm #620891
    Basilis

    Hi luckylobo10!

    That is a use of equal height.
    https://kriesi.at/support/topic/equal-column-heights/

    Review that one and let us know if that helps you out.
    if not, we can provide an other solution.

    Regards,
    Basilis

    April 24, 2016 at 10:23 pm #620900
    luckylobo10

    Yes! Works like a charm.

    Thanks for quick reply and excellent service!

    April 26, 2016 at 6:32 am #621909
    Rikard

    Hi,

    Great, glad we could help :-)

    Regards,
    Rikard

    November 18, 2016 at 1:43 pm #713980
    philthebass

    Hi,

    I’ve used the same CSS and played with the padding etc. but can’t quite get it to work.

    http://screencast.com/t/hJbkfIQgaZuS

    Can you point me in the right direction?

    Thanks

    /* button alignment home page */

    .button-align .avia-button-wrap {
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    }
    .button-align .flex_column.av_one_third {
    padding-bottom: 70px !important;
    }

    November 18, 2016 at 2:02 pm #713999
    philthebass

    Just an update;

    I managed to get the buttons aligning using the CSS below, but the buttons now encroach on the row below (see grab)

    /* button alignment home page */

    .button-align .avia-button-wrap {
    display: inline-block;
    position: absolute;
    bottom: -70px;
    left: 0;
    right: 0;
    }
    .button-align .flex_column.av_one_third {
    padding-bottom: 70px !important;
    }

    http://screencast.com/t/gJEj96hDYvs

    November 19, 2016 at 6:27 am #714268
    Rikard

    Hi @philthebass,

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    November 19, 2016 at 11:13 am #714324
    philthebass

    Hi Rikard,

    It’s on a test server here.

    Thanks

    Phil

    November 22, 2016 at 5:10 pm #715441
    Nikko

    Hey!

    Seems like you have already fixed it by adding top margins. Is this already fixed?

    Cheers!
    Nikko

    November 22, 2016 at 11:00 pm #715648
    philthebass

    Hi Nikko,

    Yes thanks. Although we’ve yet to test it on mobile which we’ll be doing later this week. I’ll let you know.

    Thanks

    Regards

    Phil

    November 22, 2016 at 11:02 pm #715649
    Nikko

    Hey Phil!

    Sure. We’ll just leave this thread open :)

    Regards,
    Nikko

    April 16, 2018 at 11:47 am #942524
    philthebass

    Hi,

    I’m having trouble with this set up on another site. On mobiles, text is encroaching on the buttons

    The code I’ve used is as follows

    /* button alignment on donation page */
    .donate-buttons .avia-button-wrap {
    display: inline-block;
    position: absolute;
    bottom: -70px;
    left: 0;
    right: 0;
    }
    .button-align .flex_column.av_one_third {
    padding-bottom: 140px !important;
    }

    All good on desktop.

    But on mobile the text encroaches

    https://screencast.com/t/AMFFDPiJnE

    In chrome dev tools I can set the margin to 80 pixels like this

    @media only screen and (max-width: 767px)
    .responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
    margin: 0;
    margin-bottom: 80px !important;
    width: 100%;
    }

    But when I add that to Quick CSS in Enfold, it doesn’t work.

    Any suggestions would be greatly appreciated.

    With thanks

    Phil

    April 19, 2018 at 8:04 am #943956
    Ismael

    Hi,

    Thank you for the update. Please wrap the css modification inside a css media query, targeting desktop and tablet screens.

    @media only screen and (min-width: 768px) {
/* button alignment on donation page */
.donate-buttons .avia-button-wrap {
display: inline-block;
position: absolute;
bottom: -70px;
left: 0;
right: 0;
}

.button-align .flex_column.av_one_third {
padding-bottom: 140px !important;
}
}

    Best regards,
    Ismael

    April 19, 2018 at 2:50 pm #944115
    philthebass

    Thanks Ismael. Nailed it as usual :-)

    I’ve chaged the break point for the colums on the page and adjusted the CSS to reflect that

    @media only screen and (min-width: 988px) {
    /* button alignment on donation page */
    .donate-buttons .avia-button-wrap {
    display: inline-block;
    position: absolute;
    bottom: -70px;
    left: 0;
    right: 0;
    }

    .button-align .flex_column.av_one_third {
    padding-bottom: 140px !important;
    }
    }

    April 19, 2018 at 7:04 pm #944251
    Jordan Shannon

    Hi,

    I’m glad you were able to get this corrected. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Place full with buttons at the bottom of column’ is closed to new replies.