ワードプレスサイドバー対応幅

「レスポンシブな」サイドバー付きのWordpressテーマを作成しました。私は20％の幅に設定しました。これはうまくいきます。しかし、画面の幅/サイズに応じて "サイズ変更"されない左サイドバーの中にFacebookウィジェットがあります。ワードプレスサイドバー対応幅

私は無駄で、私のCSSに以下試してみました：

.fb_iframe_widget iframe { 
    position: relative; 
    max-width: 100%; 
    min-width: 100%; 
}

Facebookのウィジェットがまだ小さい/狭い画面サイズの「重複」です。

出典

2016-08-16 user2502658

次回はあなたのサイトにリンクするのではなく、ちょっとした練習場を作ることをお勧めします。オーバーフローはうまくいくでしょうが、あなたはバンドエイドでそれほど学ばないでしょう。 https://jsfiddle.net/xp5knxce/私はこのようなものから始めます。また、これはWordPressやPHPとはあまり関係がありません。がんばろう！ – sheriffderek

を、あなたがオーバーフローを適用することができ：親のdivに隠されている

.art-blockcontent { 
    overflow: hidden; 
    padding: 7px; 
    margin: 0 auto; 
    color: #000000; 
    font-size: 12px; 
    font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", Calibri, sans-serif; 
}

iframeは魔法のようにスズ（右の列の伸ばした画像のように）、おそらく実際に何らかの目的に役立つ最小限の実行可能な高さ/幅である。

小さな画面サイズでもナビゲーションメニューが壊れていることに注意してください。全体的なブレークポイントを変更してサイトを1列のレイアウトにすばやく移動させる方がよいでしょう。

出典

2016-08-16 20:44:20

ありがとう、iFrameのサイズが完全に変更されました。はい、私はこの悪夢で一度に一つの問題に取り組んでいます。メニューの方が早く1列のレイアウトに行くという意味で私を指導してくれるでしょうか？ – user2502658

通常、あなたのcssを編集し、あなたのメディアクエリでブレークポイントを変更すると言っていますが、あなたのテーマがjQueryを使用してhtml要素に '応答する'クラスを適用しているようです。 Script.responsive.jsとscript.jsファイルを見て、これがどのように行われているかを確認してください。 –

あなたはこの試みる、iframeの周りのスパンで間違った幅を持っている：中間の本文の内容に過IFRAMEを停止するには

<span style="vertical-align: bottom;width: 100%;height: 230px;">

と

.fb_iframe_widget iframe { 
    position: relative; 
    max-width: 100%; 
}

出典

2016-08-16 20:30:15 Provie9

ブラウザウィンドウのサイズを変更したときや、別のデバイスでページを見ているときにこれが起こっていますか？

あなたが使用しているウィジェットによっては、それを構築するときに選択できる反応的な設定があると思われる公式のFacebookブックウィジェットです。私は、画面サイズを変えてページをリロードすると、ウィジェット自体が反応することに気付きました。ブラウザウィンドウをオンザフライでサイズ変更しても、ウィジェットのサイズには影響しません。ウィジェットを正しくレンダリングするためにjavascriptを使用していますが、ページの読み込み時にのみ使用します。

出典

2016-08-16 22:09:16 dillonlara115

ワードプレスサイドバー対応幅

答えて

関連する問題