Css selector not working

[Jennine]

Hello,
I am having a problem finding the css selector for this element. I have tried a number of different combinations but am not having any success. .opioid-deaths-text .e331-21.x-text.x-text-content-text-primary
The URL is https://www.snpnyc.org/opioid-crisis/
I attached a screenshot of the words: “over” and “approximately”. I would like to make them smaller on mobile. I added the class: opioid-deaths-text. Its not working.
please advise.
thank you

[ruenel]

Hello @Jennine,

Thanks for writing in!

It is .opioid-deaths-text .x-text-content-text-primary.

Best Regards.

[Jennine]

hello,
Thanks for your response. Unfortunately that did not work ; (

[ruenel]

Hello @Jennine,

You have added this custom CSS:

@media only screen and (max-width:540px){
    .form-div{
        width:100%;
    }
    .parallax-effect-mobile .x-bg-layer-lower-image{
        background-attachment:scroll;
    }
    .opioid-deaths-text .x-text-content-text-primary{
        font-size:20px !important;
    }
    .blue-headline{
        padding:12% 0 10px 0;
    }
.....
}

This should be expected to work when the screen size is less than 540 pixels. The problem is that somewhere on the page, there is also another CSS code that has this code:

@media only screen and (max-width: 540px){
  $el.x-text .x-text-content-text-primary, $el.x-text .x-text-content-text-primary {
    font-size: 54px !important;
    line-height: 47px !important;
  }
}

You will need to remove the other code so that the 20-pixel font will work.

Best Regards.

[Jennine]

ok great y

[ruenel]

You’re welcome.