[WordPress] css 応答幅を右余白に余分なスペースを作成します。

スポンサーリンク

Question

メディアとの反応の css に関するサイトをある

クエリ 768 px、480 px、および 320px。1040px 下のサイズ変更、同じ余分なスペースが全体のページの右余白に表示され、私はこれがどこから来るのか把握できません。これは、ワードプレスのサイトです。ここでは、

jsfiddle リンク:

ここ関連する css のいくつかです:

body, html {
  height: 100%;
  width: 100%;
  margin-left: -.01em; }

body {
  font-family: "ff-dagny-web-pro", sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 22px;
  color: black; }

#main {
  margin: 0 15%; }
  @media only screen and (max-width: 768px) {
    #main {
    margin: 0 10% 0 10%; } }
  @media only screen and (max-width: 480px) {
    #main {
    margin: 0 5% 0 5%; } }

#content {
  float: left;
  width: 68%; }
  @media only screen and (max-width: 480px) {
    #content {
     width: 100%; } }

事前のおかげで !

答え

チェックあなたの css を

.form-search

80%

margin-left

219px

の固定ピクセル幅がある

.form-search {
  height: 14px;
  width: 219px;
  margin: 0em 0px 0px 80%;
  padding: 1em 0px 0px;
}

ピクセル幅割合マージンと組み合わせることは、100% より広い要素を作成する確実な方法です

は web インスペクターを使用して試したことがありますか?Web デバッグの不可欠な部分は、私は高を示唆している (スタック オーバーフローはデバッグ エンジン) 自分の問題を見つけることができますこれらの種類の web インスペクターを使用して学習します。

http://stackoverflow.com/questions/27792323/css-responsive-width-creating-extra-space-in-right-margin

スポンサーリンク

Leave a Reply