Continuing with button issues

[anni]

Hi!

I need to continue with the issue:

CSS for button alignment

I stll haven´t able to align the buttons above the border line like the previous topic.
http://demo.finnguru.fi/

Could you please continue to help me. I needed to change the button to the Classic buttons due the design issue.

[rad]

Hi Anni,

I assume you’re still referring to the 3 buttons on those 3 columns, there are multiple URLs from that thread which a bit confusing which should be aligned.

Please replace that CSS with this

    .x-column.button-force-bottom {
     padding-bottom: calc( 2em + 84px );
    }
    .x-column.button-force-bottom .x-btn{
     position: absolute;
     bottom: 2em;
     width: calc( 100% - 3.6em );
    }
    .x-column.button-force-bottom .x-text {
     min-height: 60px;
     }
    .x-column.button-force-bottom .x-text + .x-text {
     min-height: 138px;
    }

Then add button-force-bottom to each of the column’s Class input field. It’s no longer about my-button since it has to be applied to the column itself, it’s where the buttons need to align.

And this is only applicable for that current setup, don’t use it on other columns and buttons. Else, you can duplicate that CSS with different Class name and style values. You’re free to enhance it but we can’t further cover any customization for other elements. Above CSS should serve as a sample

Thanks!

[anni]

Hi!

It is not effect at all. I place the CSS to the CSS of the page. And added button-force-bottom to all the Class of every button.

[christian]

Hey Anni,

Your site is redirecting too many times.

Please check.

Thanks.

[anni]

Please check again, for me and the client is working perfectly. Thanks

[ruenel]

Hello Anni,

I am still experiencing the same. Too many redirects error message is on my browser. Please do check your .htaccess and your site URL settings. You might need to ask further assistance from your hosting provider about this too many redirect issue. Once this is resolve, we can then log in and proceed to check your site hopefully resolving the css issue.

Best Regards.

[anni]

They have now cleaned the sessions, hopefully it helps. They haven’t got any problems to log-in neither I. Hope it helps!

[ruenel]

Hello @Anni,

We are still getting the same.

Please double check again.

[anni]

We can not see any problem, have you cleaned the cookies as it asks? Let me know if it still not work, I try to ask more help.

[rad]

Hi Anni,

Could you clarify which button really has the issue? The CSS I provided is based on the last screenshot you have provided on that separate thread. And it’s this

http://demo.finnguru.fi/wp-content/uploads/2019/01/Näyttökuva-2019-1-22-kello-16.09.03.png

And, as per instruction

Then add button-force-bottom to each of the column’s Class input field. It’s no longer about my-button since it has to be applied to the column itself, it’s where the buttons need to align.

Please add it to the column’s class where the button is, and not directly to the button.

Thanks!

[anni]

Hi! Yes, sorry, I had added that to the button. Now it´s in the column. They are now aligned but is there a way to get them like in the screen shot?

[thai]

Hi @anni,

Please update the previous CSS to this:

.x-column.button-force-bottom {
    padding-bottom: 0;
}
.x-column.button-force-bottom .x-btn{
    position: absolute;
    bottom: -15px;
    width: calc( 100% - 3.6em );
}
.x-column.button-force-bottom .x-text {
    min-height: 60px;
}
.x-column.button-force-bottom .x-text + .x-text {
    min-height: 138px;
}

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Hope that helps and thank you for understanding.

[anni]

Almost Working

Only thing, the responsively is not working when I check it on the iPad size. Are you able to check that for me too?

[thai]

Hi @anni,

Please update the previous CSS to this:

.x-column.button-force-bottom {
    padding-bottom: 25px;
}
.x-column.button-force-bottom .x-btn{
    position: absolute;
    bottom: -15px;
    width: calc( 100% - 3.6em );
}
.x-column.button-force-bottom .x-text {
    min-height: 60px;
}
.x-column.button-force-bottom .x-text + .x-text {
    min-height: 138px;
}

Then add this inline CSS to the style field of your container contains 3 columns:

display: flex; flex-flow: wrap;

Hope it helps

[anni]

Thank you! Now it´s working iPad, but not any of the mobile sizes. Any ideas?

[ruenel]

Hello Anni,

The custom css given will be applied in all screen sizes. Please have it updated so that it will display correctly in smaller screens. Use this code instead:

@media(min-width: 768px){
  .x-column.button-force-bottom {
    padding-bottom: 25px;
  }

  .x-column.button-force-bottom .x-btn{
    position: absolute;
    bottom: -15px;
    width: calc( 100% - 3.6em );
  }

  .x-column.button-force-bottom .x-text {
    min-height: 60px;
  }

  .x-column.button-force-bottom .x-text + .x-text {
    min-height: 138px;
  }
}

Please let us know if this works out for you.