モバイル用CSSとstyle.cssの適用について

オリジナルテーマを作成し、PCでの表示は上手くできています。

そして、スマホなどのモバイルに対応するために同じテーマ内に「mobile.css」を作成し、header.php内にmedia=”screen and (max-width:400px)を記述したのですが、上手く表示がされずに悩んでおります。

Chromeで確認すると、mobile.cssは読み込まれてはいるのですが、どうやらstyle.cssが優先的に適用されてしまっているようです。

CSSの優先順位の問題なのかなと思うのですが、この場合はモバイル用のCSSのみを適用させる事はできないものなのでしょうか。

問題の所在がわからないもので…。どうかご教授いただけると幸いです。