XF 2.2 Trying to make mobile look a bit different than pc

[Merlin07]

I added in this code into extra section

@media only screen and (max-width: 768px) {
.block-header {
position: relative;
border-top: 5px solid #ffd700;
background-image: url('/data/files/myimage.png');
background-blend-mode: overlay;
box-shadow: none !important;
}
}
But the box-shadow still appears on mobile devices making the font difficult to see. any suggestions on making mobile/other like devices work separate from pc?
Is there some natural inheritance from PC? or vice versa

 

[Merlin07]

Eh, nvm,

I prevented background repeating, for some reason it was the overlay image interferring grrr!
Sorry for this post.

 

[Merlin07]

Essentially this:

@media only screen and (max-width: 768px) {
  .block-header {
    background-image: url('transparent.png'); 
    background-size: 0 0; 
    background-position: 0 0; 
    background-repeat: no-repeat; 
  }
}