How to customize site title only for mobile/tablet screens

Hi,

I would like to set a different color for the site title on mobile/tablet screens than that of PC screen.
For example, the tile is now in white both for PC screens and mobile/tablet screens, and I want to have the title in mobile/tablet screens in blue while maintaining the title in white for PC screens.

Can you provide me with the code with which I can set a color of the site title only for mobile/table screens?

Thank you in advance!
Regards,

Hi,

Can you share your site URL here and can you tell me more specifically which title you want to modify?

Regards,

Hi,

Here is my site. PLEASE delete the space after the period(.) before “com”.

http://suzuki-akiko. com

On the PC screen, the site title (top left of the screen) is now in blue and not so visible.
On the mobile/tablet screen, the title in blue is fine as the background is pale blue.

I would like to have the title on the PC screen in pale color as menu items next to it while keeping the title on mobile/tablet screen as it is (in blue).

I hope it clarifies.
Regards,

Hello there,

Thank you for sharing the link to your website. Please try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1025px) {
      .site-title a {
        color: #fff;
      }
      .site-title a:hover {
        color: #31c648;
      }
    }

Regards,
Kharis
aThemes Support

Hello,

It worked perfectly!
Thank you.

Regards,

1 Like

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support