我的横幅图片未使用“@media (min-width: 320px) and (max-width:767px)”显示

Question

I have a carousel div that should be displayed for tablet mode and desktop mode. I have also a div named header-mobile-banner that should be displayed for mobile mode. The header-mobile-banner will be hidden for the tablet mode and desktop mode.Then my carousel will be hidden in mobile mode. The problem is that the header-mobile-banner is not displaying in my mobile mode, i dont know why. Here is my code: Partial css code:

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

Partial html code:

<!--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 &amp 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 &amp 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 &amp 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 &amp 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-->

Answer 1

Remove

    .header-mobile-banner{display: none;}

from the last line in

   @media (min-width: 320px) and (max-width:767px)

Answer 2

If you are using bootstrap then you can use this helper class

https://getbootstrap.com/docs/3.3/css/#responsive-utilities-classes

Hope this will help you. You do not need to write extra css for do that