Mon image de bannière ne s'affiche pas en utilisant "@media (min-width: 320px) et (max-width: 767px)"

J'ai un div carrousel qui devrait être affiché pour le mode tablette et le mode bureau. J'ai aussi un div nommé header-mobile-banner qui devrait être affiché pour le mode mobile. La bannière header-mobile sera masquée pour le mode tablette et le mode bureau. Ensuite, mon carrousel sera masqué en mode mobile. Le problème est que l'en-tête-mobile-bannière ne s'affiche pas dans mon mode mobile, je ne sais pas pourquoi. Voici mon code: partiel Code css:Mon image de bannière ne s'affiche pas en utilisant "@media (min-width: 320px) et (max-width: 767px)"

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

code html partiel:

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

Source

2017-10-20 benok

Etes-vous sûr de vouloir mettre '.header-mobile-banner {display: none;}' dans cette requête multimédia? – Peril

Je n'ai pas de .header-mobile-banner {display: none;} dans @media (min-width: 320px) et (max-width: 767px) {}. C'est le mod mobile où le carrousel devrait être caché et la bannière header-mobile devrait être affichée – benok

quelle est la dernière ligne de cette requête média? – Peril

-2

Si vous utilisez bootstrap, vous pouvez alors utiliser cette classe d'aide

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

J'espère que ceci vous aidera. Vous n'avez pas besoin d'écrire des css supplémentaires pour le faire

Source

2017-10-20 14:12:17

hmm merci pour cela, mais mon problème est l'en-tête-bannière-mobile ne montre pas dans le mobile pas la réactivité. – benok

Certainement pas une solution pertinente ... – Peril

Mon image de bannière ne s'affiche pas en utilisant "@media (min-width: 320px) et (max-width: 767px)"

Répondre

Questions connexes