Стиль селектора идентификатора не применяется в медиа-запросе - PullRequest
Новая
       26

Стиль селектора идентификатора не применяется в медиа-запросе

0 голосов
/ 04 мая 2020

Я пытаюсь применить какое-то правило стилизации к трем селекторам #id в медиа-запросе, но оно, похоже, не работает. Однако, если я делаю то же самое вне запроса, он работает нормально (но, к сожалению, мне просто нужно это правило для этого конкретного размера экрана. Я пытаюсь добиться того, чтобы настроить поля div в соответствии с размером изображения, когда размер экрана ниже 767 пикселей (слева и справа есть пробел).

Спасибо! 

body {
    background-color: #fffffe;
}
.container{
    margin: 0;
}

/** HEADER **/
#header-nav{
    background-color: #5d46ea;
    height: 78px;
    border: 0;
}
#logo-img { /** Logo **/
    background: url(../images/imgonline-com-ua-resize-wU3umxGfKn8Y0H6h.jpg) no-repeat;
    width: 150px;
    height: 62px;
    margin-left: 20px;
    margin-right: 20px;
}
.navbar-brand h1 { /** Blog Name **/
    color: #fd9200;
    font-family: 'oxygen', sans-serif;
    font-size: 1.4em;
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px;
}
#nav-list a {
    color: #fd9200;
    font-weight: bold;
    background: #5d46ea;
}
#nav-list a:hover{
    background: #684fff;
}
          
.custom-toggler.navbar-toggler { 
    border: 1px solid rgb(253, 146, 0);
}

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(253, 146, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/** HOME PAGE **/

.container {
    margin-top: 10px;
    
}
.jumbotron {
    background-color: #ffffff;
    border: 2px solid #5d46ea;
    box-shadow: 0 0 10px #5d46ea;
    padding: 0;
    margin: 0;
}
.row {
  margin-top: 15px;
}

#main-tile, #dessert-tile, #smoothie-tile {
    height: 250px;
    width: 100%;
    margin-bottom: 15px;
    position: relative;
    border: 2px solid #5d46ea;
    box-shadow: 0 0 10px #5d46ea;
    overflow: hidden;
}

#main-tile:hover, #dessert-tile:hover, #smoothie-tile:hover {
    box-shadow: 0 1px 5px 1px #cccccc;
}

#main-tile {
    background: url(https://via.placeholder.com/360x250) no-repeat;
    background-position: center;
}

#dessert-tile {
    background: url(https://via.placeholder.com/360x250) no-repeat;
    background-position: center;
}

#smoothie-tile {
    background: url(https://via.placeholder.com/360x250) no-repeat;
    background-position: center;   
}

#main-tile span, #dessert-tile span, #smoothie-tile span {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    text-align: center;
    font-size: 1.2em;
    text-transform: uppercase;
    background-color: #6a6a6a;
    color: #fff;
    opacity: .8;
}

/* END HOME PAGE */

/*************** MEDIA QUERIES ***************/

/** LARGE DEVICE **/
@media (min-width:1200px) {
    .jumbotron {
       background: url(https://via.placeholder.com/1200X675) no-repeat;
        height: 675px;
    }
}

/** MEDIUM DEVICE **/
@media (min-width:992px) and (max-width: 1199px) {
 .jumbotron {
       background: url(https://via.placeholder.com/992x558) no-repeat;
        height: 558px;
    }  
}

/** SMALL DEVICE **/
@media (min-width: 768px) and (max-width: 991px) {
    .jumbotron {
       background: url(https://via.placeholder.com/768x432) no-repeat;
        height: 432px;
    }  
}

/** EXTRA SMALL DEVICES **/
@media (min-width:767px) and (max-width: 576px){
    .jumbotron {
    background: url(https://via.placeholder.com/768x432) no-repeat;
        height: 432px;
    }  
    #main-tile, #dessert-tile, #smoothie-tile{
    width: 360px;
    margin: 0 auto 15px;
    }
}

/** SUPER EXTRA SMALL DEVICES **/
@media (max-width: 479px) {

#main-tile, #dessert-tile, #smoothie-tile {
    width: 280px;
    margin: 0 auto 15px;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-witdth, initial-scale=1">
    <title>Food Blog</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- HEADER -->
 <header>
    <nav id="header-nav" class="navbar navbar-light navbar-expand-lg">
          
           <div class="navbar-header">
               <a href="index.html" class="float-left d-none d-md-block">
                <div id="logo-img" alt="Logo image"></div>
               </a>
                <div class="navbar-brand">
                  <a href="index.html"><h1>Brand Name</h1></a>
                </div>
            </div>

    <button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
  
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul id="nav-list" class="navbar-nav ml-auto text-center">
          <li class="nav-item">
            <a class="nav-link" href="#">Main</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Dessert</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Smoothie</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
        </ul>
    </div>
         
    </nav>
    </header>
    
<!--  MAIN CONTENT -->
    
   <div id="main-content" class="container mx-auto">
   
<!-- JUMBOTRON -->
    
     <div class="jumbotron text-center">  <!-- FEATURED RECIPE -->
         <img src="https://via.placeholder.com/768X432" alt="New Recipe Image" class="img-fluid d-block d-md-none">
     </div>  
     
<!-- TILES BELOW THE JUMBOTRON  -->

 <div id="home-tiles" class="row text-center">
    <div class="col-md-4 col-sm-6 col-xs-12">
       <a href="menu-categories.html"><div id="main-tile"><span>Mains</span></div></a>
    </div>
    <div class="col-md-4 col-sm-6 col-xs-12">
       <a href="menu-categories.html"><div id="dessert-tile"><span>Deserts</span></div></a>
    </div>
    <div class="col-md-4 col-sm-12 col-xs-12">
       <a href="menu-categories.html"><div id="smoothie-tile"><span>Smoothies</span></div></a>
    </div>
 </div>     
</div>   
   
<!-- END OF MAIN CONTENT -->
    
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 </body>
</html>

1 Ответ

0 голосов
/ 04 мая 2020

Эта строка в вашем коде является проблемой: 

@media (min-width:767px) and (max-width: 576px){ ...

В вашем коде это относится ко всей ширине, превышающей 767, и ко всей ширине, меньшей 576 пикселей. Я полагаю, что это должно быть так: 

@media (max-width:767px) and (min-width: 576px){ ...

... чтобы охватить ширину между 576 и 767px

ДОПОЛНЕНИЕ после комментариев:

Я добавил это (общее) правило: 

.jumbotron img {
    max-width: 100%;
}

В противном случае изображение внутри jumbotron будет иметь исходный размер, переполнение jumbotron при меньших размерах экрана, что также сделает всю страницу более широкой / заставляя полосу прокрутки. 

body {
  background-color: #fffffe;
}

.container {
  margin: 0;
}


/** HEADER **/

#header-nav {
  background-color: #5d46ea;
  height: 78px;
  border: 0;
}

#logo-img {
  /** Logo **/
  background: url(../images/imgonline-com-ua-resize-wU3umxGfKn8Y0H6h.jpg) no-repeat;
  width: 150px;
  height: 62px;
  margin-left: 20px;
  margin-right: 20px;
}

.navbar-brand h1 {
  /** Blog Name **/
  color: #fd9200;
  font-family: 'oxygen', sans-serif;
  font-size: 1.4em;
  font-weight: bold;
  text-transform: uppercase;
  padding: 10px;
}

#nav-list a {
  color: #fd9200;
  font-weight: bold;
  background: #5d46ea;
}

#nav-list a:hover {
  background: #684fff;
}

.custom-toggler.navbar-toggler {
  border: 1px solid rgb(253, 146, 0);
}

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(253, 146, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}


/** HOME PAGE **/

.container {
  margin-top: 10px;
}

.jumbotron {
  background-color: #ffffff;
  border: 2px solid #5d46ea;
  box-shadow: 0 0 10px #5d46ea;
  padding: 0;
  margin: 0;
}
.jumbotron img {
    max-width: 100%;
}
.row {
  margin-top: 15px;
}

#main-tile,
#dessert-tile,
#smoothie-tile {
  height: 250px;
  width: 100%;
  margin-bottom: 15px;
  position: relative;
  border: 2px solid #5d46ea;
  box-shadow: 0 0 10px #5d46ea;
  overflow: hidden;
}

#main-tile:hover,
#dessert-tile:hover,
#smoothie-tile:hover {
  box-shadow: 0 1px 5px 1px #cccccc;
}

#main-tile {
  background: url(https://via.placeholder.com/360x250) no-repeat;
  background-position: center;
}

#dessert-tile {
  background: url(https://via.placeholder.com/360x250) no-repeat;
  background-position: center;
}

#smoothie-tile {
  background: url(https://via.placeholder.com/360x250) no-repeat;
  background-position: center;
}

#main-tile span,
#dessert-tile span,
#smoothie-tile span {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  text-align: center;
  font-size: 1.2em;
  text-transform: uppercase;
  background-color: #6a6a6a;
  color: #fff;
  opacity: .8;
}


/* END HOME PAGE */


/*************** MEDIA QUERIES ***************/


/** LARGE DEVICE **/

@media (min-width:1200px) {
  .jumbotron {
    background: url(https://via.placeholder.com/1200X675) no-repeat;
    height: 675px;
  }
}


/** MEDIUM DEVICE **/

@media (min-width:992px) and (max-width: 1199px) {
  .jumbotron {
    background: url(https://via.placeholder.com/992x558) no-repeat;
    height: 558px;
  }
}


/** SMALL DEVICE **/

@media (min-width: 768px) and (max-width: 991px) {
  .jumbotron {
    background: url(https://via.placeholder.com/768x432) no-repeat;
    height: 432px;
  }
}


/** EXTRA SMALL DEVICES **/

@media (max-width:767px) and (min-width: 576px) {
  .jumbotron {
    background: url(https://via.placeholder.com/768x432) no-repeat;
    height: 432px;
  }
  #main-tile,
  #dessert-tile,
  #smoothie-tile {
    width: 360px;
    margin: 0 auto 15px;
  }
}


/** SUPER EXTRA SMALL DEVICES **/

@media (max-width: 479px) {
  #main-tile,
  #dessert-tile,
  #smoothie-tile {
    width: 280px;
    margin: 0 auto 15px;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-witdth, initial-scale=1">
  <title>Food Blog</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <!-- HEADER -->
  <header>
    <nav id="header-nav" class="navbar navbar-light navbar-expand-lg">

      <div class="navbar-header">
        <a href="index.html" class="float-left d-none d-md-block">
          <div id="logo-img" alt="Logo image"></div>
        </a>
        <div class="navbar-brand">
          <a href="index.html">
            <h1>Brand Name</h1>
          </a>
        </div>
      </div>

      <button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>

      <div class="collapse navbar-collapse" id="navbarNav">
        <ul id="nav-list" class="navbar-nav ml-auto text-center">
          <li class="nav-item">
            <a class="nav-link" href="#">Main</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Dessert</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Smoothie</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
        </ul>
      </div>

    </nav>
  </header>

  <!--  MAIN CONTENT -->

  <div id="main-content" class="container mx-auto">

    <!-- JUMBOTRON -->

    <div class="jumbotron text-center">
      <!-- FEATURED RECIPE -->
      <img src="https://via.placeholder.com/768X432" alt="New Recipe Image" class="img-fluid d-block d-md-none">
    </div>

    <!-- TILES BELOW THE JUMBOTRON  -->

    <div id="home-tiles" class="row text-center">
      <div class="col-md-4 col-sm-6 col-xs-12">
        <a href="menu-categories.html">
          <div id="main-tile"><span>Mains</span></div>
        </a>
      </div>
      <div class="col-md-4 col-sm-6 col-xs-12">
        <a href="menu-categories.html">
          <div id="dessert-tile"><span>Deserts</span></div>
        </a>
      </div>
      <div class="col-md-4 col-sm-12 col-xs-12">
        <a href="menu-categories.html">
          <div id="smoothie-tile"><span>Smoothies</span></div>
        </a>
      </div>
    </div>
  </div>

  <!-- END OF MAIN CONTENT -->

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

</html>
...