Capitalisation of header title text on mobile devices

[ym1999]

Please see the following store: https://et-tani.myshopify.com/ (password is YMStore).

When accessed from mobile, the header title text on the navigation bar is lower case. I am trying to make it upper case as in the desktop version.

I have added the following code onto the base.css file:

/* Mobile */
@media (max-width: 767px) {
.header__heading {
text-transform: capitalize !important;
}
}

Still absolutely nothing when I refresh on mobile. What's happening here? I'm using the Dawn theme.

Thanks

[PageFly-Victor · Accepted solution]

Hi @ym1999 

You can try this code by following these steps:

Go to Online store => themes => actions => edit code  and add this code on file theme.liquid before tag </body>

<style>
@media screen and (max-width: 767px){
a.header__heading-link.link.link--text.focus-inset {

    text-transform: uppercase !important;

}
}
</style>

Hope this answer helps.

Best regards,

Victor | PageFly

[ym1999]

thanks!