Align buttons in Grid Row so they stay the same height on browser resize

Hi,

Please give the grid row element a unique developer ID such as “btn-align” and use the below CSS

#btn-align .avia-button-center {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);  
}

Best regards,
Vinay

Hi Pointbreakd,

Try playing with the bottom value and work out the value that works for you.

Best regards,
Victoria

Hi Pointbreakd,

Please try this code instead.

Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

@media only screen and (min-width: 990px) {
    #top #btn-align .flex_column_table {
      min-height: 391px;
    height: 100%;
  }

  #top #btn-align .avia-button-center {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);  
  }
  #top #btn-align .hr-invisible, .hr-invisible .hr-inner {
        height: 75px;
  }

}

If you need further assistance please let us know.

Best regards,
Victoria