0

I guess this is a novice question but here it is.

I have been editing a child theme CSS and trying to change this specific code 

@media (min-width: 769px)
    #carousel-hestia-generic span.sub-title {
        font-size: 24px; 
    }

Which I see from the inspect in Chrome. When I add it to my style.css in my child theme and make the font size let's say 36px, it doesn't change. Actually, Chrome shows a strikethrough...

the element I want to change https://snag.gy/izc10u.jpg

the CSS file in my child theme https://snag.gy/GVfDs9.jpg

Improve this question

1 Answer 1

Reset to default
1

You have to put it like this:

@media only screen and (min-width: 769px) {
    #carousel-hestia-generic span.sub-title {
        font-size: 24px; 
    }
}

Notice how @media has a block {} which contains the CSS selector you want to work with.

Improve this answer
3
  • thank you for your immediate help, but it doesn't actually work again... even with your code. Check this: snag.gy/afSFVq.jpg and also this snag.gy/HsGlfA.jpg
    – Alexander F
    Commented Aug 25, 2018 at 23:27
  • Just for testing use font-size: 40px !important; and check if there is any difference.
    – Castiblanco
    Commented Aug 25, 2018 at 23:28
  • with the "!important it did work! thank you so much...
    – Alexander F
    Commented Aug 25, 2018 at 23:32

Not the answer you're looking for? Browse other questions tagged or ask your own question.