.text-slider .maintitle not taking effect on mobile display

Hello; I want to adjust font size of slider on mobile screen. I used this CSS code:

@media only screen and (max-width: 320px) {
.text-slider .maintitle {
font-size: 20px;
}
.text-slider .subtitle {
font-size: 14px;
}
}

The subtitle is changing according to font size settings perfectly.

Problem is: maintitle is not responding to any changes in font size. any suggestions please?

Try to add an !important argument and let me know how it goes.


@media only screen and (max-width: 320px) {
.text-slider .maintitle {
font-size: 20px !important;
}
.text-slider .subtitle {
font-size: 14px;
}
}

Regards,
Kharis

Dear Kharis,

Added !argument for .maintitle, still does not help.

text-slider .subtitle works perfectly. Problem is with text-slider .maintitle is not changing with different font sizes and i cannot explain why.

is .text-slider .maintitle the correct element name?

any suggestion?