Custom header logo from desktop version does not show on mobile version

hi,

i currently have different colored header logo images for different pages using the code for each page:

<style>
.header-title-logo a {
  content: url("https://static1.squarespace.com/static/6179e301282d777ca075f46a/t/61df592ef5f3f23010c205f1/1642027311119/logo-name.png");
  }
</style>

but the different colored images do not show up on mobile and instead use the default header logo. do i need additional code to use the same image for both the desktop and mobile versions?

I can't remember if you need a different selector or not. Try this first.

<style>
.header-title-logo a {
  content: url("https://static1.squarespace.com/static/6179e301282d777ca075f46a/t/61df592ef5f3f23010c205f1/1642027311119/logo-name.png");
  }
@media screen and (max-width:768px) {
  .header-title-logo a {
  	content: url("https://static1.squarespace.com/static/6179e301282d777ca075f46a/t/61df592ef5f3f23010c205f1/1642027311119/logo-name.png");
  	}
  }
</style> 

If that doesn't work, be sure to share a link to your site.