Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • March 5, 2024 at 10:37 am #1436354
    hanssmeijsters

    Hi there,

    I want to align the 3 buttons at the bottom. I’ve tried several things, but I can’t seem to get this to work. I used the CSS code below:

    .page-id-14 #av_section_2 .flex_column .avia-button-wrap {
    position: absolute;
    bottom: 25px !important;
    }

    But then the button will appear on top of the text and is no longer centered. Can you please help?

    March 5, 2024 at 5:07 pm #1436387
    Rikard

    Hey hanssmeijsters,

    Please try this CSS instead:

    .page-id-14 #av_section_2 .flex_column .avia-button-wrap {
  position: absolute;
  bottom: 25px !important;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 300px;
}

.page-id-14 #av_section_2 .flex_column {
  height: 500px;
  min-height: 500px;
}

    Best regards,
    Rikard

    March 6, 2024 at 1:44 pm #1436498
    hanssmeijsters

    Thanks. Works perfect!

    March 6, 2024 at 2:34 pm #1436500
    hanssmeijsters

    but… I’m trying to achieve the same thing on the ‘Services’ page with the following code:

    /*button allignment on diensten/

.page-id-18 #av_section_2 .flex_column .avia-button-wrap {
 position: absolute;
 bottom: 25px !important;
 left: 0;
 right: 0;
 margin-left: auto;
 margin-right: auto;
 width: 300px;
}

.page-id-18 #av_section_2 .flex_column {
 height: 475px;
 min-height: 475px;
}

    It doesn’t work there? What am I doing wrong?

    March 6, 2024 at 5:50 pm #1436522
    Rikard

    Hi,

    I can’t see that the button code is applying on that page, please try checking your code again and make sure that it’s not placed in a media query for example. You can inspect the element in your browser to check which CSS is applying to it.

    Best regards,
    Rikard

    March 7, 2024 at 10:02 am #1436586
    hanssmeijsters

    Hi Rikard,

    Can you help me with this? I can not do it. Thanks!

    March 7, 2024 at 12:42 pm #1436609
    Mike

    Hi,
    When I test your ‘Services’ page with the following code it works correctly, try adding the css to your WordPress ▸ Customize ▸ Additional CSS

    .page-id-18 #av_section_2 .flex_column .avia-button-wrap {
 position: absolute;
 bottom: 25px !important;
 left: 0;
 right: 0;
 margin-left: auto;
 margin-right: auto;
 width: 300px;
}

.page-id-18 #av_section_2 .flex_column {
 height: 475px;
 min-height: 475px;
}

    Enfold_Support_4942.jpeg

    Best regards,
    Mike

    March 7, 2024 at 12:54 pm #1436611
    hanssmeijsters

    Thanks. I made some stupid mistake. Now it works!

    March 7, 2024 at 1:04 pm #1436614
    Mike

    Hi,
    Glad to hear that you have this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Align buttons at the bottom of rows’ is closed to new replies.