CTA CSS Updates

Search Best Practices - Search Front-End
1

Hi Team,

I’ve just added an icon to the first CTA within the FAQs card of my client’s experience. Unfortunately, on some of the CTAs with longer copy, the icon and end of the CTA are being cut off, see screenshot below. I’m sure this can be fixed with some simple CSS updates but I haven’t been able to resolve - would someone be able to take a look and guide me through a fix please? Thank you.

Screenshot 2021-02-05 at 16.17.59
Screenshot 2021-02-05 at 16.17.591002×298 14.4 KB

2

Hi Scott,

Looks like you were close with your CSS, but targeted the wrong class. You were using:

.HitchhikerFaqAccordion-ctasWrapper
{
  .HitchhikerCTA-iconLabel
  {
    padding-left: .5rem;
    padding-right: .5rem;
    padding-top: .225rem;
    padding-bottom: .225rem;
  }
}

You can see when I inspect and hover over the class you targeted (.HitchhikerCTA-iconLabel), the element selector on the left does not cover the entire CTA container, but rather only the label for the CTA.
image

Instead you’ll want to move a few classes up to target the entire CTA container, namely .HitchhikerCTA. When inspecting this class, I see that you’ve set a max-width to keep the CTAs on other verticals the same width. Since we don’t want to conflict with that here, we want to only target .HitchhikerCTA in the FAQ accordion card (.HitchhikerFaqAccordion). To nest CSS classes, separate them with a space. Your CSS will look something like:

.HitchhikerFaqAccordion .HitchhikerCTA {
  padding: 8px 8px;
}

Hope that helps! Let us know if you have any other questions.

3

@Kristy_Huang - this is perfect, thanks for your help!