Unable to select correct CSS item to modify

Hello,

I am having an issue modifying something on my site. as you can see in the picture, (on screen width 375 or less) the “backsplashes” text on my essential grid is too large. I am trying to select that text and bring down the size using CSS. here is the code I tried using but have had no success.

@media (min-width: 0px) and (max-width: 375px)
{#eg-14-post-id-3.filterall.eg-our-work-nav-wrapper.eg-post-id-3.tp-esg-item.itemtoshow.isvisiblenow.esg-media-cover-wrapper.esg-entry-cover.esg-cc.eec.esg-center.eg-our-work-nav-element-1-a.eg-our-work-nav-element-1
{ font-size: 10px !important;
}
}

Do you have any suggestions on what the correct CSS path for this item would be? and do you have any suggestions on how I can find the correct CSS path in the future?
(I am going to include the link to the page i am talking about as well as my login credentials in a secure note)

Much Thanks,
Morgan

Hello There,

Thanks for writing in and the very detailed post information. To resolve your issue, use this custom css code instead:

@media (max-width: 480px){
  #esg-grid-14-1 .tp-esg-item a{ 
    font-size: 10px !important;
  }
}

Please let us know if this works out for you.

thanks for the response, but that modifies all of the boxes. I am just looking to modify the text “backsplashes” and make it smaller. not all of them. thanks.

Hey Morgan,

To target the text, you first need to target the grid’s post ID. You can do that using the browser’s developer tools. Here’s a tutorial.

Here’s the code:

#eg-14-post-id-3 .eg-our-work-nav-element-1 {
    font-size: 14px !important
}

And, it should see the text like this:

Just wrap the code with your media query if you need to. Remember to ensure you don’t have any syntax error because that will cause additional custom codes not to work.

Hope that helps.

That is the perfect answer! Thanks so much!

You’re welcome, Morgan. Glad we could help.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.