バックグラウンドジャンボトロン画像を中心にしてモバイル対応にする

Question

私はウェブサイト上で適切に並べることができたジャンボトロンの背景画像で戦ってきましたが、モバイルレスポンスにすることはできません。サイトへのリンクはHTML puremistdiffusers.com

ここ

されている。

<div class="jumbotron" style="background-image: url(https://puremistdiffusers.com/wp-content/uploads/2017/02/slider-candle-jpeg-dark.jpg); background-repeat: no-repeat;"> 
    <div class="container"> 

     <h1 class="text-uppercase">YOUR AROMATHERAPY</h1> 
     <p>UP TO 40% OFF ON ALL PRODUCTS</p> 

     <a class="btn btn-default btn-inverse btn-lg text-uppercase topbutton" href="https://puremistdiffusers.com/product/" role="button">Shop Now</a>&nbsp; 

    </div> 
</div> 

、ここでCSSです：私は、私が見つけたいくつかの異なる技術を試してみました

} 
.jumbotron { 
    background-color: #fff !important; 
} 
.jumbotron { 
    padding-top: 48px; 
    padding-bottom: 48px; 
    height: 397px !important; 
    background-position: center; 
    width: 100%; 
} 
.jumbotron .container { 
    max-width: 100%; 
} 
.jumbotron h1, .jumbotron .h1 { 
    color: #fff; 
    font-size: 50px !important; 
    text-align: center; 
} 
.jumbotron h1, .jumbotron .h1 { 
    color: #fff; 
    font-family: "Adobe Garamond Pro", "Adobe Caslon Pro", Helvetica, Arial, sans-serif; 
    font-size: 1.5rem; 
} 
.jumbotron p { 
    margin-bottom: 15px; 
    font-size: 30px; 
    font-weight: 400; 
    color: #fff; 
    text-align: center; 
} 
.btn-default.btn-inverse { 
    color: #FFFFFF; 
    background-color: #162e00; 
    border-color: #FFFFFF; 
} 
.topbutton { 
    padding: 1% 6%; 
    font-size: 20px; 
    line-height: 2.375rem; 
    border-radius: 0.1875rem; 
    margin-left: 38%; 
    margin-top: 3%; 
} 
.btn:hover{ 
    background:transparent; 
    color:#fff; 
} 
@media (max-width:768px){ 
    .jumbotron h1, .jumbotron .h1 { 
    color: #fff; 
    font-size: 30px !important; 
} 
.jumbotron p { 
    font-size: 17px; 
} 
.jumbotron { 
    height: 259px !important; 
} 
.btn { 
    margin-left: 30%; 
} 
} 
@media (max-width:640px){ 
    .jumbotron h1, .jumbotron .h1 { 
    color: #fff; 
    font-size: 20px !important; 
} 
.jumbotron p { 
    font-size: 12px; 
} 
.jumbotron { 
    height: 259px !important; 
} 
.btn { 
    margin-left: 30%; 
} 
} 
@media (max-width:480px){ 
    .jumbotron h1, .jumbotron .h1 { 
    color: #fff; 
    font-size: 17px !important; 
} 
.jumbotron p { 
    font-size: 12px; 
} 
.jumbotron { 
    height: 259px !important; 
} 
.btn { 
    margin-left: 30%; 
} 
} 

ここではstackoverflowで私はどちらかの左に並んですべてを取得し、中心にされていないか、すべての中心がモバイルレスポンスを緩めるだろう。前もって感謝します。

Answer 1

この行を追加するには、[OK]：HTMLで

.jumbotron { 
background-image: url('your image background'); 
height: 100%; 
width: 100%; 
background-size: cover; 
} 

.jumbotron .container { 
position: relative; 
top:100px; 
} 

とあなたの頭タグでは、この追加：私が行ったとき

<meta name="viewport" content="width=device-width, initial-scale=1">