Place full with buttons at the bottom of column - Support | Kriesi.at

Viewing 16 posts - 1 through 16 (of 16 total)

Author

Posts
April 24, 2016 at 9:52 pm #620880

luckylobo10
Participant

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
Inactive Moderator
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
Inactive Moderator

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
Participant

Yes! Works like a charm.

Thanks for quick reply and excellent service!

April 26, 2016 at 6:32 am #621909

Rikard
Keymaster

Hi,

Great, glad we could help :-)

Regards,
Rikard

November 18, 2016 at 1:43 pm #713980

philthebass
Participant

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
Participant

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
Keymaster

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
Participant

Hi Rikard,

It’s on a test server here.

Thanks

Phil

November 22, 2016 at 5:10 pm #715441

Nikko
Inactive Moderator

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
Participant

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
Inactive Moderator

Hey Phil!

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

Regards,
Nikko

April 16, 2018 at 11:47 am #942524

philthebass
Participant

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
Moderator
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
Participant

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
Inactive Moderator

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.