Dynamic Header Style on Desktop but Solid Header Style on Mobile

Site URL: http://www.amongthepines.gallery

Hey!

I've got my header style set to dynamic as I need my logo to overlay hero images on the desktop site. The trouble is due to the nature of our logo and slideshow images, the logo visibility varies greatly on mobile and so we'd like to implement a solid background colour on the mobile view of our site only.

Is there a way we can keep the header style dynamic on desktop, but solid white on mobile?

Many thanks in advance for your help!

Connor

Add to Design > Custom CSS

@media screen and (max-width:767px) {
header#header, .header-announcement-bar-wrapper, .header-border {
    background-color: white !important;
}
}