Formatting CTA's separately by vertical

Search
1

I am trying to wrap the CTA for the FAQ vertical in my experience, since the CTA’s tend to be very lengthy and extend past the container on mobile.

cta
cta533×590 30.7 KB

I updated the CSS of CTA’s with this:

.HitchhikerCTA-iconLabel
{
color:#000000;
text-decoration: underline;
text-decoration-color: #ffb500;
white-space: normal;
text-align: left
}

However, this impacts all CTA’s and not just the FAQ CTA’s so it makes the other CTA’s look strange on desktop:

ctas
ctas1058×425 20.6 KB

Any thoughts on a fix?

Thanks!

2

Hi Ariana,

You’ll want more specifically targeted CSS here. In order to only impact the CTAs in the accordion card, you can use nested SCSS syntax:

.HitchhikerFaqAccordion {
    .HitchhikerCTA-iconLabel
    {
    color:#000000;
    text-decoration: underline;
    text-decoration-color: #ffb500;
    white-space: normal;
    text-align: left
    }
}

This means that the rule will only go into affect for a CTA nested in an element of class HitchhikerFaqAccordion. Let me know if this helps!