[coracleParticipant]

I have four buttons with varying texts at the bottom of my page. When the screen is small, the text jumps to the next line making the buttons different sizes. I was wondering if there is a way to make all the buttons the same size with the text vertically aligned?

The site is: http://arkinfoseclabs.ca/ buttons are at the very bottom of the page.

[DarshanaModerator]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.home #x-section-10 .x-btn {
    min-height: 90px;
}

Hope that helps.

[coracleParticipant]

Hi,

I put the code in and it worked! Thanks for your help 🙂

I was just wondering if there’s a way to vertically center align the text so that the text sits in the middle of the button?

[Rue NelModerator]

Hello There,

Thanks for the updates! To resolve this issue and align the text at the middle of the button, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(max-width: 979px){
  .home #x-section-10 .x-column{
    width: 100% !important;
    min-height: 90px;
    display: table;
    margin-bottom: 10px;
  }

  .home #x-section-10 .x-btn {
    display: table-cell;
    vertical-align: middle;    
  }
}

We would loved to know if this has work for you. Thank you.

[Author]

Posts