段落が小さな画面に表示されない

私は単純なページ幅を持っています。小さな画面では、水平バーが表示され、テキストの一部が非表示になっています。段落が小さな画面に表示されない

html { 
 
    height: 100%; 
 
} 
 
body { 
 
    background-image: url(FreeVector-Fresh-Beer.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 
img { 
 
    margin: auto; 
 
} 
 
.paragraph { 
 
    text-align: center; 
 
    margin-top: 5%; 
 
    width: 100%; 
 
    font-family: 'Alice', serif!important; 
 
    color: #996633; 
 
} 
 
p a { 
 
    color: #996633 !important; 
 
    font-size: 35px !important; 
 
    padding-top: 1%; 
 
} 
 
@media only screen and (min-device-width: 120px) and (max-device-width: 400px) { 
 
    .paragraph { 
 
    word-break: break-all; 
 
    } 
 
}

<body class="jumbotron"> 
 
    <figure> 
 
    <img class="img-responsive" src="Craft-Beer-SA-min.png" alt="Chania"> 
 
    </figure> 
 

 
    <div class="paragraph" style="font-size:50px"> 
 
    <p>Our Website Is Brewing ! ! !</p> 
 
    <p>Coming To A Browser Near You. . . 
 
     <br><a href="">[email protected]o.uk</a> 
 
    </p> 
 
    </div> 
 
</body>

にはどうすれば表示されるテキストを保持し、スクロールバーを削除することができますか？また、どのような画面サイズでもすべてを見ることができるように、どのように背景画像を反応させることができますか？ここで

出典

2016-08-11 Wosley Alarico

あなたはバイオリンを作ることができますか？ – vel

これは、1つの単語が120ピクセルを超えているためです。この場合、水平スクロールバーを無視するには最小幅260pxが必要です。 – Pugazh

は素敵な説明です：widthは異なりますブラウザ自体（の幅を指しながらCSS media queries min-width and min-device-width conflicting?

device-widthは、（。 1024×768から例えば1024）ディスプレイの解像度を指し、ブラウザが解決しない場合はが最大化されます）。

追加参照：http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

ソリューション：

代わりのmin-device-widthとmax-device-width使用min-widthとmax-width。

html { 
 
    height: 100%; 
 
} 
 
body { 
 
    background-image: url(FreeVector-Fresh-Beer.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 
img { 
 
    margin: auto; 
 
} 
 
.paragraph { 
 
    text-align: center; 
 
    margin-top: 5%; 
 
    width: 100%; 
 
    font-family: 'Alice', serif!important; 
 
    color: #996633; 
 
} 
 
p a { 
 
    color: #996633 !important; 
 
    font-size: 35px !important; 
 
    padding-top: 1%; 
 
} 
 
@media only screen and (min-width: 120px) and (max-width: 400px) { 
 
    .paragraph { 
 
    word-break: break-all; 
 
    } 
 
}

<body class="jumbotron"> 
 
    <figure> 
 
    <img class="img-responsive" src="Craft-Beer-SA-min.png" alt="Chania"> 
 
    </figure> 
 

 
    <div class="paragraph" style="font-size:50px"> 
 
    <p>Our Website Is Brewing ! ! !</p> 
 
    <p>Coming To A Browser Near You. . . 
 
     <br><a href="">[email protected]</a> 
 
    </p> 
 
    </div> 
 
</body>

出典

2016-08-11 07:12:29 Pugazh

ありがとうございます。私は実際にフォントサイズを5vwに設定し、すべてを並べ替えます。次の問題は背景イメージにあります。私はそれがそれの内容を隠しているのを見る。私はそれをどのような画面サイズでも見ることができるように、どのように反応させることができますか？ –

段落が小さな画面に表示されない

答えて

関連する問題