グリッドシステムによるスマホの画面の乱れ解決

WordPress のテーマの一つである Twenty Twelve は、サイドバーが右側になるように作られています。必要があってこれを左側にもってきて、ここにメインナビゲーションを表示することにしました。

方法はよく紹介されている次の方法です。スタイルシートの次の部分

.site-content {
float: left;
width: 65.104166667%;
}
.widget-area {
float: right;
width: 26.041666667%;
}

この float の right と left を入れ替えて次のようにします。

.site-content {
float: right;
width: 65.104166667%;
}
.widget-area {
float: left;
width: 26.041666667%;
}

そして左側のサイドバーにメインナビゲーションを表示するようにしました。
横幅の広いウィンドウではきれいに表示されるのですが、狭めたりスマホで見ると右のように崩れてしまいます。メニューが本文に重なってしまいます。

これはメニューバーの形をそろえるためにメニューバーの width を固定に指定していることに原因がありそうです。それでグリッドシステムを使用することにしました。スタイルシートに下記を追加して、

.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, glrd8, grid9, grid10, grid11,grid12 {
float: left;
display: inline;
margin-left: 10px;
margin-right: 10px;
}
.grid1  { width: 60px; }
.grid2  { width: 140px; }
.grid3  { width: 220px; }
.grid4  { width: 300px; }
.grid5  { width: 380px; }
.grid6  { width: 460px; }
.grid7  { width: 540px; }
.grid8  { width: 620px; }
.grid9  { width: 700px; }
.grid10 { width: 780px; }
.grid11 { width: 860px;}
.grid12 {width: 940px;}

sidebar.php の全体を <div class=”grid3″>   </div> で囲みます。

そうしましたら、本文と重なることはなくなり、さらに狭めるとメニューが下に移動するようになりましたが、右のように「検索」と「TOP」は崩れたままです。

幅を指定したメニューバーの下の部分は正しく表示されています。それで、検索に幅を指定してみようと試してみました。

.widget_search {
width: 220px;
width: 15.71428571rem;
}

このように検索の部分に width で幅を固定に指定してみましたら、右のようにきれいに表示されるようになりました。「TOP」もこれに影響されていたのか、正しい位置に表示されるようになりました。

グリッドシステムでは、横幅の指定のしかたに注意が必要のようです。
なぜなのか、調査は今後の課題です。どなたかご存じでしたら教えてください。