-2

So in the below html in my wp site I need to make the tel number bigger:

<div class="cmsmasters-icon-phone-4">
    <span>
        <span>Call Us Anytime</span>
        <a href="tel:0800-689-0150"><strong> 0800 689 0150</strong></a>
    </span>

I've tried adding the below CSS:

.cmsmasters-icon-phone-4 span.a {
font-size:20;
}

without much luck. I'm still a newbie so any help would be appreciated

Kevin Rawls
  • 11
  • 3

1 Answers1

0

Your selector is wrong at span.a this is the selector for a span with class a (<span class="a">) Change it to .cmsmasters-icon-phone-4 span a so a space instead of a .

Nico Shultz
  • 1,872
  • 1
  • 9
  • 23
  • thanks I've tried .cmsmasters-icon-phone-4 span a { font-size:20px; } but still didn't work ..the text is in the header of the below page - the number didn't seem to change its font size https://nalogistics.co.uk – Kevin Rawls Sep 09 '20 at 09:18
  • than `strong` probably has a `font-size` defined change it to `.cmsmasters-icon-phone-4 span a strong { font-size: 20rem;}` – Nico Shultz Sep 09 '20 at 09:19
  • thanks, tried it like this too but still not working :( – Kevin Rawls Sep 09 '20 at 09:22
  • or should I try removing strong and add it to css instead – Kevin Rawls Sep 09 '20 at 09:27
  • Inspect the element in your browser and see if something is overriding it and did you refresh cache?? – Nico Shultz Sep 09 '20 at 09:27
  • you're right it's being overriden by this as in inspect font size is crossed .header_mid .slogan_wrap .slogan_wrap_text strong { font-family: 'Roboto Condensed', Arial, Helvetica, 'Nimbus Sans L', sans-serif; font-size: 13px; line-height: 18px; font-weight: 700; font-style: normal; text-transform: uppercase; text-decoration: none; is there anyway I can preserve the font for my span a not to be overriden by this? – Kevin Rawls Sep 09 '20 at 09:31
  • You can add `!important` `.cmsmasters-icon-phone-4 span a strong { font-size: 20px !important;}` – Nico Shultz Sep 09 '20 at 09:36
  • I tried again the important tag as well but still no joy. This time I can't even see it via inspect. Any other ideas? – Kevin Rawls Sep 09 '20 at 09:43
  • Are you sure the HTML in your question is correct? And can you send your current css selector – Nico Shultz Sep 09 '20 at 10:00
  • Yes..as I can easily modify it and the changes are reflected on the website. The CSS selector I've added the !important .cmsmasters-icon-phone-4 span a strong { font-size: 20px !important; } in the custom CSS section of WP – Kevin Rawls Sep 09 '20 at 10:13
  • `.header_mid .slogan_wrap .slogan_wrap_text strong` you said this is the selector that overwrites your css but I don't see the `.slogan_wrap_text` in your html – Nico Shultz Sep 09 '20 at 10:23
  • I added it via the theme's custom header html feature so it's added automatically after this [link]#header > div.header_mid > div > div > div.slogan_wrap > div > div [link] – Kevin Rawls Sep 09 '20 at 10:30
  • 1
    Managed to make it work with this .cmsmasters-icon-phone-4 a strong { font-size: 20px !important; } – Kevin Rawls Sep 09 '20 at 11:31