[英]My banner picture is not displaying using “@media (min-width: 320px) and (max-width:767px)”
我有一個輪播 div,應該在平板電腦模式和桌面模式下顯示。 我還有一個名為 header-mobile-banner 的 div,應該在移動模式下顯示。 在平板模式和桌面模式下,header-mobile-banner 將被隱藏。然后我的輪播將在移動模式下隱藏。 問題是標題移動橫幅沒有在我的移動模式下顯示,我不知道為什么。 這是我的代碼:部分 css 代碼:
/*general*/
.font-Awesome{font-family: 'fontawesomeregular';}
.font-GaramondPremierePro{font-family: 'Garamond Premiere Pro';}
.font-CormorantGaramond{font-family: 'Cormorant Garamond', serif;}
.font-GreatVibes{font-family: 'Great Vibes', cursive;}
.white{color: #ffffff;}
/*Header by order*/
.header-banner{ width:100%; height:663.31px; padding:0px !important; top:0; }
.header-banner-graydiv{background-color: black; background: rgba(0,0,0,0.5); position: absolute; top: 0%; left: 0; right: 0; vertical-align: middle; text-align: center; horizontal-align: middle; margin: 14% 15% 9% 15%; bottom: 0%; padding: 4%;}
.carousel-inner .header-banner-graydiv h3{font-size: 50px;}
.carousel-inner .header-banner-graydiv h1{font-size:92px;}
.carousel-inner .header-banner-graydiv h4{font-size: 39px;margin-top: -2%;margin-bottom:4%; }
.carousel-inner .header-banner-graydiv p{font-size:20px;}
.header-subscribe-section {background-color:#ad1f34; height:99.27px; width:100%}
.header-p-latestmenus{font-size:20px; letter-spacing:0.5px;}
.header-p-subscribe{font-size:28px; letter-spacing:0.5px;}
.header-btsubscribe{border-radius:4px; background-color:#831024; color:white; width:134.55px; height:44.19685px; width:146.19685px; border:none;font-size:18px;}
.header-textboxemail{width: 286.779527559px;height: 46.19685px;font-size: 17px;border: 0;margin-left: -49%;margin-top: 7%;}
.header-subscribe-section p{padding: 4% 15%;}
.header-mobile-graydiv{display: none;}
/*responsiveness lowest to greatest*/
/*mobile*/
@media (min-width: 320px) and (max-width:767px)
{
#myCarousel{display: none;}
.carousel{display: none;}
.header-mobile-banner{ width:100%; height:663.31px; padding:0px; top:0; background-image: url("../img/head_banner.jpg"); background-repeat: no-repeat;background-size: contain; }
.header-mobile-graydiv{ background-color: black; height:300px; background: rgba(0,0,0,0.5); position: absolute; top: 0%; left: 0; right: 0; vertical-align: middle; text-align: center; horizontal-align: middle; bottom: 0%; }
.header-mobile-graydiv h3{font-size: 50px;}
.header-mobile-graydiv h1{font-size: 92px;}
.header-mobile-graydiv h4{font-size: 39px;}
.header-mobile-graydiv p{font-size: 20px;}
.header-mobile-banner{display: none;}
}
/*tablet*/
@media (min-width: 768px) and (max-width:800px)
{
.header-mobile-banner{display: none;}
.header-banner-graydiv{margin: 4% 11% 8% 11%; bottom: 0%; padding:2%;}
.carousel-inner .header-banner-graydiv h3{font-size: 40px;}
.carousel-inner .header-banner-graydiv h1{font-size:68px;}
.carousel-inner .header-banner-graydiv h4{font-size: 30px;margin-top: -2%;margin-bottom:4%; }
.carousel-inner .header-banner-graydiv p{font-size:15px;}
}
@media (min-width: 801px) and (max-width:991px)
{
.header-mobile-banner{display: none;}
.header-banner-graydiv{margin: 4% 11% 8% 11%; bottom: 0%; padding-top:6%;}
.carousel-inner .header-banner-graydiv h3{font-size: 45px;}
.carousel-inner .header-banner-graydiv h1{font-size:80px;}
.carousel-inner .header-banner-graydiv h4{font-size: 35px;margin-top: -2%;margin-bottom:4%; }
.carousel-inner .header-banner-graydiv p{font-size:17px;}
}
/*desktop up to the size of my screen*/
@media (min-width: 992px) and (max-width:1365px)
{
.header-mobile-banner{display: none;}
}
/*huge*/
@media (max-width: 1920px)
{
.header-mobile-banner{display: none;}
.header-banner{ width:100%; height:663.31px; padding:0px !important; top:0; }
}
部分html代碼:
<!--header-->
<div id="header">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="img/head_banner.jpg" class="header-banner" >
<div class="header-banner-graydiv">
<h3 class="font-GaramondPremierePro white">WELCOME TO</h3>
<h1 class="font-GreatVibes white">Your Restaurant Name</h1>
<h4 class="font-GaramondPremierePro white">FOOD & RESTAURANT</h4>
<p class="font-CormorantGaramond white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br> tempor incididunt ut labore et dolore magna. aliqua. Ut enim ad minim </p>
</div>
</div>
<div class="item">
<img src="img/sample_carousel1.jpg" class="header-banner" >
<div class="header-banner-graydiv">
<h3 class="font-GaramondPremierePro white">WELCOME TO</h3>
<h1 class="font-GreatVibes white">Your Restaurant Name</h1>
<h4 class="font-GaramondPremierePro white">FOOD & RESTAURANT</h4>
<p class="font-CormorantGaramond white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br> tempor incididunt ut labore et dolore magna. aliqua. Ut enim ad minim </p>
</div>
</div>
<div class="item">
<img src="img/sample_carousel2.jpg" class="header-banner" >
<div class="header-banner-graydiv">
<h3 class="font-GaramondPremierePro white">WELCOME TO</h3>
<h1 class="font-GreatVibes white">Your Restaurant Name</h1>
<h4 class="font-GaramondPremierePro white">FOOD & RESTAURANT</h4>
<p class="font-CormorantGaramond white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br> tempor incididunt ut labore et dolore magna. aliqua. Ut enim ad minim </p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="header-mobile-banner" >
<div class="header-mobile-graydiv">
<h3 class="font-GaramondPremierePro white">WELCOME TO</h3>
<h1 class="font-GreatVibes white">Your Restaurant Name</h1>
<h4 class="font-GaramondPremierePro white">FOOD & RESTAURANT</h4>
<p class="font-CormorantGaramond white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br> tempor incididunt ut labore et dolore magna. aliqua. Ut enim ad minim </p>
</div>
</div>
<div class="container-fluid header-subscribe-section">
<div class="container">
<div class="row">
<div class="col-md-7 col-xs-12">
<p>
<span class="header-p-latestmenus font-Awesome white">Get our latest menus in your inbox.</span>
<span class="header-p-subscribe font-GreatVibes white">Subscribe Now!</span>
</p>
</div>
<div class="col-md-5 col-xs-12">
<input type="text" name="lname" class="header-textboxemail font-Awesome white" placeholder="Email Address">
<button type="button" class="header-btsubscribe font-GaramondPremierePro">SUBSCRIBE</button>
</div>
</div>
</div>
</div>
</div>
<!--end of header-->
移除
.header-mobile-banner{display: none;}
從最后一行開始
@media (min-width: 320px) and (max-width:767px)
如果您使用的是引導程序,那么您可以使用此輔助類
https://getbootstrap.com/docs/3.3/css/#responsive-utilities-classes
希望這會幫助你。 您不需要為此編寫額外的 css
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.