简体   繁体   中英

Bootstrap jumbotron width issue on small screen

I have an issue with my jumbotron which contains some text and a button. Basically on a small screen (320) the text contained in it doesn't diaplay centered anymore and a white sidebar appears on the right and I can't figure out where that is coming from. You can see it in the 240 and 320 screen here: http://mattkersley.com/responsive/ the website is http://test.assatena.it/

html

<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;
}

thank you

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM