Vertical centering of CTAs

Search Best Practices - Search Front-End
1

Hi team,

I am trying to align my CTAs for professionals vertical to align in the center vertically with the text. As you can see here, the CTAs are shifted towards the bottom.

Screen Shot 2020-06-30 at 10.49.41 AM
Screen Shot 2020-06-30 at 10.49.41 AM1548×802 153 KB

I haven’t been able to find a post about this, but have tried using the following code:
.Hitchhiker-cta-iconLabel {
align-self: center;
}
Is there a way to shift these CTAs ‘up’? My location vertical CTAs are aligned correctly. Thank you!!

2

Hi Cam,

With the default Handlebars template, the CTAs container will align with the details container. If you’d like to change the alignment, you’ll need to modify the card template slightly.

template.hbs
In the template.hbs, you can move the title and subtitle into the ‘info’ div.

<div class="HitchhikerProfessionalStandard {{cardName}}">
  {{> image }}
  <div class="HitchhikerProfessionalStandard-body">
    <div class="HitchhikerProfessionalStandard-contentWrapper">
      <div class="HitchhikerProfessionalStandard-info">
        {{> title }}
        {{> subtitle }}
        {{> details }}
        {{> list }}
        {{> phone }}
      </div>
      {{> ctas }}
    </div>
  </div>
</div>

answers.scss
You can then ensure the contentWrapper div extends the whole height of the card, and use justify-content and align-self to align the CTAs to the middle of the card.

  .HitchhikerProfessionalStandard-contentWrapper {
    height: 100%;
  }

  .HitchhikerProfessionalStandard-ctasWrapper {
    justify-content: center;
    align-self: center;
  }
1 Like