Wordpress 「LION MEDIA」サイトロゴサイズが小さすぎるのを修正したい

「LION MEDIA」というテーマを使用中の素人です。
サイトロゴの設定は縦30pxですが、希望より小さいため 50px に表示されるように編集いたしました。

/* ヘッダーロゴサイズ変更*/ 
a.siteTitle__link
{
  height: 50px;
}

.siteTitle {
    height: 50px;
    margin: 10px;
}

img.siteTitle__img 
{
  max-height:50px;
}

.siteTitle__sub
{
	padding-top:15px;
	vertical-align:middle
}

すると、スマホ表示の時に　.container　のエリアの縦が合わず、100pxとなってしまいました。
（公式サイトのデモでは50pxで収まっているので、2段になったものと思います）

スマホ／PCの見栄えの変更を様々なサイトを渡って、次のように書きましたが、改善されずでした。

{a.siteTitle__link
{
  height: 30px;
}}
@media only screen and (max-device-width: 480px) 
 /* スマホ用のCSS */
{.siteTitle {
    height: 30px;
}}

@media only screen and (max-device-width: 480px) 
 /* スマホ用のCSS */
{img.siteTitle__img 
{
  max-height:30px;
}}

@media only screen and (max-device-width: 480px) 
 /* スマホ用のCSS */
{.siteTitle__sub
{
	padding-top:1px;
	vertical-align:middle
}}

@media only screen and (max-device-width: 480px) 
 /* スマホ用のCSS */
{.container
{
	height:30px;
}}

こののち、どのように記述したら段ズレなどなしに表示できそうでしょうか。
お分かりの方がいらしたら、ご教示をよろしくお願いします。