流体コンテナブラウザダウンサイズ

Question

私が現在取り組んでいるウェブサイトはhttps://twobyfore.comです。現在のところ、ヒーローヘッダー用のCodepenを表示しているiframeがあります。このヘッダーには、IDが#lp-code-196のdivがあります。このdivがスタイリングを持ち、これは（モバイル、13" 、17" 上）画面幅にdiv要素を合わせて取り組んできました

position: relative; 
width: 100vw; 
left: calc(-50vw + 50%); 

は、しかし、私は、ブラウザの幅を小型化すると、白い雨どいを開始することだけに気づきましたいずれかの側に表示されます（https://snag.gy/qwE1XH.jpg）。

私はこれを除く

$(window).resize(function() { 
    $('#lp-code-196').css('width', $(window).width); 
}); 

は幅+白ガター問題を解決するために働いていない、いくつかのjQueryを使用しようとしました。

これを修正する方法は誰にも分かりますか？

Answer 1

あなたの質問はminifiedではないので、完全な答えを出すのは難しいです。しかし、の問題は、固定幅のコンテナ.lp-positioned-contentが入っていて、コンテナの外にを広げようとしているその内容のコンテンツがであることにあります。これは悪い習慣です。ここではあなたが持っているもののXMLバージョンです：

<div width="100%" position="relative"> 
    <cool-iframe width="100%" position="absolute"></cool-iframe> 
    <container width="900px"> 
    <header>Top producers aren't satisfied with average.</header> 
    ... 
    </container> 
</div> 

あなたをオフを開始するには：

<container width="900px"> 
    <div-that-tries-to-be-100%-screen-width> 
    </div-that-tries-to-be-100%-screen-width> 
</container> 

そして、ここではあなたが試みるべきものだ

100%へ #lp-code-196の widthを設定

1. とleft〜0。
2. はあなたが水平にページの中央に配置したいmargin: 0 autoとスタッフすべてに固定幅のコンテナを作成します.lp-positioned-content
3. ために同じことを行い、それ

Answer 2

私はそれがまだ生きてプッシュされていないが、これはありますブラウザのサイズを変更するときにうまく機能するように見えるコード。

はJavaScript：

<script> 
    $(document).ready(function() { 
    var element = $('#lp-code-196'); 
    $(element).remove(); 
    $('#lp-pom-block-8').append(element); 
    }); 
</script> 

CSS：

#lp-code-196 { 
    z-index: 0; 
    display: block; 
    width: 100%; 
    left: 0; 
    top: 0; 
    }