Change color of header phone number & social icons on mobile

Hi,

I currently have the following CSS code placed in the Quick CSS section, but it’s not taking effect when the website is viewed on mobile devices (the phone number and social icons go back to the default color).

.phone-info span { color: white !important; }
#top .social_bookmarks li a {
color: white;
}

How can I apply the color change on mobile too? Alternatively, if this is not possible, is there a way to keep the top bar on desktops, but hide it on mobile screens?

Thank you for your help!