• 2016年5月24日 アプリ開発
    ゲーム開発素人が1週間でFlappyBird風ゲームアプリを作ってみた【MoneyBird】
  • 2016年5月10日 その他
    宝くじで3000万円当たったのに全然嬉しくない件
  • 2016年4月12日 おすすめ情報
    中学生・高校生に人気のバンドはこれだ!12選【2016年版】
  • 2016年3月9日 おすすめ情報
    Pebble Time Round | スマートウォッチがこんなにかっこいいはずがない
  • 2016年2月18日 その他
    お酒は太るってほんと?太らないお酒もある?
  • 2016年2月7日 生活
    大学生のバイトは高時給なパチンコ屋がオススメ!最適なアルバイト選びで最高のキャンパスライフを
  • 2016年2月5日 その他
    就活ってなにからやればいいの!?何をすればいいのかわからない!
  • 2016年1月27日 生活
    引越しの初期費用は交渉次第で半額以下になる!節約して快適な新生活を始めよう!
  • 2016年1月22日 おすすめ情報
    【厳選子育てアプリ4選】子育て記録もアプリを使えばこんなに手軽になる!
  • 2016年1月19日 その他
    大企業と中小企業(ベンチャー企業)あなたはどっちに向いている?

ECサイトを作成しているのですが、ふと確認した時に右に変な余白が出来てしまうことが有りました。

スクリーンショット 2016-08-02 21.38.07

最初は気にしていなかったのですが、操作中に右にちょっとずれるのが気持ち悪かったので修正しました。

その時にした対応方法を紹介します。

全体をwrapしてoverflow: hidden;

.wrap{
    overflow:hidden;
}

iphoneではみ出ていた部分を治すときにこれをしました。
簡単に説明すると、全体をくくっている要素に対して、overflowをhiddenしました。

overflowのhiddenとは、はみ出た部分は無視してもらっているということです。
参考overflowについて

横幅widthの設定変更

pcで見た時の余白は以下のように対処しました。

.wrap{
    width:100%;
}

としていたものを無効にして、

@media (min-width: 1200px){
    .wrap{
        width: 1170px;
    }
}

というようにしました。
画面に対してのwidthをしっかり指定してあげることによって、いい感じに余白がけされました。

viewportについて

こういった問題の時に調べると、必ずviewport問題が出てきます。

大体の問題は、最初に挙げた2つの方法で対処出来ますが、もし全くできなかったら以下の参考記事で修正してみてください。
参考もう逃げない。HTMLのviewportをちゃんと理解する

コメントを残す

関連キーワード
Webサイト制作】の関連記事
  • SEO対策なんてするな! - Webサイトの役割を考えよう
  • cakephpインストール時エラー mod_rewriteの設定について
  • wordpressでapache権限を与える【パーミッション対処法】
  • 【overflow】右に変な余白が出来た時の対処法(スマホでも)【wordpress】【web制作】
  • woocommerceのproducts list thumbnail(商品一覧) のサイズが合わない時の対処法【wordpress】
  • 【wordpress】変更を保存するには事前にこのファイルを書き込み可能にする必要があります。【エラー対応】
この記事を読んだ人はこちらの記事も読んでいます。