スマホのレスポンシブデザインで右側に余白ができる場合

2014年12月27日

レスポンシブのサイトを作成していたら、何故かスマホのサイズの場合のみ、右側に余白（空間）ができていた。

HTML の構造は以下のようなもの。

<body>
<div id="header" class="clearfix">
  <div id="header_inner">
    <h1 id="logo">タイトル</h1>
  </div>
  <div id="navi">
  <ul id="navi_menu" class="clearfix">
    <li><a href="index.html">Home</a></li>
    <li><a href="works.html">Works</a></li>
    <li><a href="statement.html">Statement</a></li>
    <li><a href="#" class="disabled">Resume</a></li>
    <li><a href="contact/contact1.php">Contact</a></li>
    <li id="ttt"><a href="#">To the top</a></li>
  </ul>
  <a id="pull" href="#">Menu<i class="fa fa-bars"></i></a>
  </div><!-- end of #navi -->
</div><!-- end of #header -->
<div id="container">
    <div id="content">
    ・・・以下省略

CSS は以下のようなもの（関連部分抜粋）

#header {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  height: 120px;
}
#header_inner {
  max-width: 930px;
  min-width: 320px;
  margin: 0 auto;
  position: relative;
}
#container {
  max-width: 930px;
  min-width: 320px;
  margin: 30px auto;
  position: relative;
}
#content {
  width: 100%;
  position: relative;
  margin: 0 auto;
}

#header の幅は 100% に指定してあるのに、いくつかのページのみスマホのサイズでヘッダーの右側に余白ができる。よく見るとヘッダー部分のみではなく全体に余白ができている。デスクトップ PC でサイズを変更した場合や FireFox の View port resizer では余白が確認できない。

解決策

ラッパー要素の #container に「overflow: hidden;」を指定して解決。

#content 内の a 要素が長すぎて（折り返して表示しないため）影響をしていたみたい。その他 max-width やパディングの計算が間違っていたりとかが原因か。。。

但し、スライダーの Next や Prev のアイコンの表示など必要に応じて、画面サイズにより「overflow:」の値を調節する必要あり。

Web Design Leaves

スマホのレスポンシブデザインで右側に余白ができる場合

解決策