2017-03-03 18 views
0

テキストとボタンが含まれているジャンボトロンに問題があります。基本的に小さな画面(320)には、それに含まれるテキストが中央に表示されず、右側に白いサイドバーが表示され、どこから来ているのかわかりません。あなたはここで240と320のスクリーンでそれを見ることができます:http://mattkersley.com/responsive/ウェブサイトはあなたがフィドルを提供することができますブートストラップジャンボトロン幅の問題が小さい画面で

<div class="jumbotron vertical-center container-fluid center-block"> 
    <div class="container center-block"> 
     <h1 class="center-block">Associazione Culturale e Musicale Atena</h1> 
     <div class="text-center center-block"><a data-toggle="modal" href="#modal-iscrizione" class="page-scroll btn btn-success btn-xl">iscriviti qui!</a></div> 
    </div> 
</div> 

CSS

.jumbotron{ 
    position: relative; 
    background-image: url(http://www.assatena.it/wp-content/uploads/2014/06/sfondo1.png); 
    background-size: cover; 
    height: 100%; 
    width: 100%; 
    text-align: center; 
    margin: 0 auto; 
    overflow: hidden; 
} 

はあなたに

+0

に感謝http://test.assatena.it/

htmlですまたはスニペット? – Swellar

+0

余分なスペースは、あなたのジャンボトロンのためではありません。それは、 "max-width:100%"のないimg要素のためです。あなたの "ニュース"セクションについて話す。また、小さな画面のフォントサイズを小さくします。これはテキストのセンタリングに関する問題を解決します。 – divy3993

+1

メディアクエリを使用して、その画面幅のフォントサイズを変更してください。 –

答えて

1
img{max-width:100%;} 
.jumbotron h1 {word-wrap: break-word;} 
+0

ちょうどこのcssを追加してから、より小さな320pxのスクロールを参照してください – Heta

関連する問題