<html>要素が画面に表示されない

私は単純で反応性の高いレイアウトで作業していますが、予期しないhtml要素のサイズに問題があります。画面のサイズが1080ピクセルより大きい場合はすべて問題ありませんが、画面のサイズを変更したり、モバイルでページを読み込むたびに、HTML要素は画面の幅より小さくなります。<html>要素が画面に表示されない

Here you can see what I am talking about.

And here you can see the html width

私が試した何

：はhtmlと体のマージン、パディングを設定

1）（私はthis CSSのリセットを使用しています）、0にし、それらの幅両方とも100％;

2）box-sizingプロパティをborder-boxに設定します。追加

3）：

html, body{width: 100%; padding: 0; margin: 0;}

4）私はまた、サイズ変更の体の幅を設定するには、いくつかのjsのコードを記述しようとしましたが、それは助けないように、私はJSで良くないです..

5）また、フォントサイズの変更は役に立ちません。

おそらく単純な解決策がありますが、私はそれを修正しようとするほど、混乱してしまいます。誰かが私を助けてくれることを願っています。

私はここでかなり新しくなっていますので、もう少し辛抱強くお願いします:)。 click here

body{ 
background-image: url(gwiazdy.png) !important; 
background-position: center; 
background-attachment: fixed; 
background-size: cover; 
background-color: #000; 
width: 100% !important; 
font-size: 20px !important; 
padding: 2% 0 !important; 
margin: 0 !important; 
font-family: 'Bellefair', serif !important; 
color: #ccc !important; 
min-width: 329px !important;} 


@media screen and (max-width: 752px) { 
.content{ 
    width: 100% !important; 
} 
body{ 
    padding: 0 !important; 
    padding-bottom: 15 !important; 
} 
}

それはenaughはない場合、あなたがすることができ、全体のcssとhtmlを参照してくださいまた、私のレイアウトを参照してください。ここで

は、身体のCSSです。

出典

2017-11-06 jannec22

あなたは身体 – marciojc

ポストことだけでなく、この質問相対的だHTMLをlargedされる一つの要素 – zer00ne

そのあなたの '.about_text' – marciojc

.home { 
 
    display: flex; 
 
    flex-direction: column; 
 
    } 
 
    .title{ 
 
    text-align: center 
 
    } 
 
    
 
    .about { 
 
    display: flex; 
 
    flex-direction: row; 
 
    } 
 
    
 
    .about > div { 
 
    flex: 1; 
 
    padding: 0 10px 0 10px; 
 
    } 
 
    
 
    .about img { 
 
width: 100%; 
 
    }

<div class="home"> 
 
    <div class="title"> 
 
    <h2> 
 
     About 
 
    </h2> 
 
    </div> 
 
    
 
    <div> 
 
    Masz dużo na głowie i nigdy nie masz czasu na szukanie swoich przepisów? Zarejestruj się i trzymaj wszystkie swoje przepisy w jednym miejscu! 
 
    </div> 
 
    <div class="about"> 
 
    <div> 
 
     <img src="//www.placehold.it/300x300?text=About"> 
 
    </div> 
 
    <div> 
 
     <img src="//www.placehold.it/300x300?text=About"> 
 
    </div> 
 
    <div> 
 
     <img src="//www.placehold.it/300x300?text=About"> 
 
    </div> 
 
    </div> 
 
    
 
</div>

この問題は.about_text要素によって引き起こされます。そのセクションをコーディングする方法は正しくありません。 .home divにはdisplay: flexが設定されており、デフォルトではflexにはプロパティflex-direction: rowが設定されています。しかし、要素にwidth: 100%を追加することによって、要素を.home divの下に列として表示しようとしています。 flex-direction: columnを代わりに使用して、新しいdivを追加し、そのdivにすべての.about_text要素を置き、flex-direction: rowのプロパティをそのdivに追加します。

出典

2017-11-06 22:07:20 izulito

これはうまくいきましたが、今度は主な問題にもう一度問題があります。おそらく、1つの要素が親よりも大きかったでしょう。そしてもう一度私はどちらかと思っていない。 – jannec22

ディスプレイを削除する：次のコードからインラインブロック。。素材 - アイコン{ font-family： '素材アイコン'; font-weight：normal; font-style：normal; font-size：24px; line-height：1; 文字間隔：通常; text-transform：なし; display：インラインブロック; white-space：nowrap; ワードラップ：通常; direction：ltr; -webkit-font-feature-settings： 'liga'; -webkit-font-smoothing：アンチエイリアス処理済み。 } – izulito

<html>要素が画面に表示されない

答えて

関連する問題