Hero List font-size

[RRembs]

Hi,

I would like to customize the font-size of the “Hero List” for mobile view. How can I do this?

regards,

Rabea

[themes2go]

Hello Rabea,
in order to do that you have to add a little CSS code.
Go to Appearance -> Customize -> Additional CSS e paste this code:

@media only screen and (max-width: 1200px)
.qt-herolist p {
    font-size: 0.8rem;
}

You can set a size for the font in rem, em or just pixel.

Hope this helps,
Peter

[RRembs]

Hi,

thanks for your replay! Unfortunately it’s not working.

[themes2go]

Hello Rabea,
the css snippet I’ve provided works on the hero list text.

https://imgur.com/Je02RgS

Which part of the hero list do you need to be edited?

[RRembs]

Hello Peter,

it’s the right part you send me the css for. But I don’t now why on my page it’s not working ????? Very strange! Do you have any idea why it’s not working?

[RRembs]

https://imgur.com/a/5Qo6avx

[RRembs]

Sorry!
Now I see on my screenshot that we have the same. What is bigger now? The Bullets? I need to have the text bigger. Or am I now totally wrong?

[RRembs]

Now I tried different breakpoints and I adjusted the font-size to 40 px. Just to see if something happenes. But nothing helped…

[themes2go]

Hello Rabea,
I’ve just tried with the same code and works nicely on our online demos.
You can try adding the !important rule, so the code would be:

@media only screen and (max-width: 1200px)
.qt-herolist p {
    font-size: 40px !important;
}

If you have any caching plugin installed and active, make sure to delete the cache.

[RRembs]

Hello Peter,

I tried again, but it’s still not working. I also checked your screenshot again, and I don’t see that your font-size is bigger. I really don’t know what’s maybe wrong with my page???? I also think your code should be right!!! I added the code in the customizer-aditional css. I have a child-theme is it maybe not working because of this. I tried also to put your code in the style.css of the child-theme but also this didn’t work 🙁 Something is blocking this customization???? Of course I cleared the hole cache of my browser.

I don’t get it.

[themes2go]

Hello!

The screenshot I’ve sent you was meant to be sure you were referring to the text pointed by the arrow. It doesn’t represent the edit.

I’ve just checked your website source code and it seems no edits have been made. The font-size is still 0.8em.

https://imgur.com/xQlo6a1

It can’t be the child theme because the additional css added in the customizer will overwrite the child theme css.

I would suggest to add this code again:

@media only screen and (max-width: 1200px)
.qt-herolist p {
    font-size: 40px !important;
}

Save the edit and then clear the cache of your website and check on your mobile device in incognito mode.

At this point, assuming that the code is working fine, I think it’s only a cache problem both of your website and your browsers (desktop and mobile).

• This reply was modified 3 years, 7 months ago by themes2go.

[RRembs]

Thank you very much for your efforts!

Thats all very weird. I looked in my “customization css” and the code was definitely there. Now I pasted the code again and also cleared the cache and opened the page in incognito mode. But it’s still not working????

Here is also an actual screenshot of the code on my page:
https://imgur.com/a/HBs8Xit

Now it looks like that the code is at least there.

[themes2go]

Hello Rabea,
our office was closed due to Easter holidays.
I’m not sure why but I’ve noticed the code has lost some brackets.
Try this instead:

@media only screen and (max-width: 1200px) {
.qt-herolist p {font-size: 40px !important;}
}

As always, make sure your cache is empty (both WordPress and browser).

Waiting for your feedback,

Peter

[RRembs]

Hi Peter,

that worked 😉 Thank you so much for your help!!!!

Nice Easter Holiday for you!

regards,

Rabea

[themes2go]

Nice! Glad it works!