Simplicity2 childにｈ１～の見出しＣＳＳを追加すると文字がレスポンシブにならない件

わいひら様こんばんは。
日々のアップデート誠にありがとうございます。

初歩的なことなのかも知れないのですが、答えが見つからず記入させていただきます。
どなたか分かる方がいらっしゃったらご指導お願いします。

以前使用していた1.84のバージョンではｈ１～ｈ３タグの文字がモバイル表示ですと自動で小さくなったのですが、2.0に変更すると大きなままです。Simplicity本体には手を加えず、子テーマのみに変更を加えています。
以下追加ＣＳＳです。
—————————————————

/************************************
** 見出し（H1-6）
************************************/
h1, h2, h3, h4, h5, h6{
line-height:130%;
color:#333;
}

.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6{
position:relative;
margin-top:35px;
margin-bottom:20px;
}
.article h1{
position: relative;
color: #000000 ;
background: #ff69b4;
font-size: 30pt ;
line-height: 1;
margin: 20px -10px 20px -10px;
padding: 10px 5px 10px 20px;
box-shadow:1px 4px 7px 0px #666666 ;
}
.article h1:after, article h1:before {
content: “”;
position: absolute;
top: 100%;
height: 0;
width: 0;
border: 5px solid transparent;
border-top: 5px solid #333;
}
.article h1:after {
left: 0;
border-right: 5px solid #333;
}
.article h1:before {
right: 0;
border-left: 5px solid #333;
}

#archive-title{
padding-bottom:20px;
font-size:26px;
}
.article h2{
position: relative;
color: #000000 ;
background: #00bfff;
font-size: 26pt ;
line-height: 1;
margin: 20px -10px 20px -10px;
padding: 10px 5px 10px 20px;
box-shadow:1px 3px 7px 0px #666666 ;
}
.article h2:after, article h2:before {
content: “”;
position: absolute;
top: 100%;
height: 0;
width: 0;
border: 5px solid transparent;
border-top: 5px solid #333;
}
.article h2:after {
left: 0;
border-right: 5px solid #333;
}
.article h2:before {
right: 0;
border-left: 5px solid #333;
}
.article h3{position: relative;
color: #000000;
background: #f96e5b;
　 font-size:23px;
border: 3px solid #f96e5b;
margin: 10px 10px 23px 10px;
padding: 10px 5px 10px 10px;
border-radius: 3px;
box-shadow:1px 3px 7px 0px #666666 ;
}
.article h3:after, .article h3:before {
content: “”;
position: absolute;
top: 100%;
height: 0;
width: 0;
}
.article h3:after {
left: 40px;
border: 10px solid transparent;
border-top: 10px solid #f96e5b;
}
.article h3:before {
left: 40px;
border: 10px solid transparent;
border-top: 10px solid #f96e5b;
}
.article h4{
position:relative;
padding-left:30px;
border-bottom:2px solid #ccc;
font-weight: bold;
font-size: 22px;
line-height: 38px;
}

.article h4:after,.article h4:before{
content:”;
height:18px;
width:4px;
display:block;
background:#00A8FF;
position:absolute;
top:8px;
left:15px;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
-ms-transform:rotate(45deg);
}

.article h4:before{
height:10px;
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
top:16px;
left:7px
}

—————————————————-
1.84では全く同じＣＳＳでよかったので、上記ＣＳＳを修正すれば良いのか、あるいはモバイル用に新たな設定をすれば良いのか分かりません。
(mobile.cssにフォントサイズを小さくしたものを記入しましたが、変化がありませんでした。)

よろしくお願いいたします。