What to do if the media query does not work?

E

Eithenhard2019-02-01 13:43:14

Layout

Eithenhard, 2019-02-01 13:43:14

Good day friends, there is a footer

page code

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <title>Главная</title>
  </head>
  <body>
   <header>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="#">имя</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Главная<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">1</a>
        </li>
        <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">1</a>
          <a class="dropdown-item" href="#">2</a>
 
        </div>
      </li>
      </ul>
    </div>
  </nav>
</header>

<main role="main" class="flex-shrink-0">
  <div class="container">
    <h1 class="mt-5"></h1>
    <p class="lead"></p>
    <p></p>
  </div>
</main>

<footer class="footer sticky-bottom">
<div class="container bottom_border">
<div class="row">
<div class=" col-sm-4 col-md col-sm-4  col-12 col">
<h5 class="headin5_amrc col_white_amrc pt2">Реквизиты</h5>
<p class="mb10 dfooter">117638, г.Москва <p class="dfooter">. 2,<p class="dfooter">офис 322</p></p></p>
<p><i class="fa fa-phone"></i>8(495)225-84-05</p>
<p><i class="fa fa fa-envelope"></i></p>


</div>


<div class=" col-sm-4 col-md  col-6 col">
<h5 class="headin5_amrc col_white_amrc pt2">Продукция</h5>
<ul class="footer_ul_amrc">
<li><a href="#">Арматуры</a></li>
<li><a href="#">Балка</a></li>
<li><a href="#">Квадрат</a></li>
<li><a href="#">Круг</a></li>
<li><a href="#">Лист</a></li>
<li><a href="#">Полоса</a></li>
</ul>
</div>


<div class=" col-sm-4 col-md  col-6 col">
<h5 class="headin5_amrc col_white_amrc pt2">Услуги</h5>
<ul class="footer_ul_amrc">
<li><a href="#">Доставка</a></li>
<li><a href="#">Резка</a></li>
<li><a href="#">Установка</a></li>
<li><a href="#">Услуга 1</a></li>
<li><a href="#">Услуга 2</a></li>
<li><a href="#">Услуга 3</a></li>
</ul>
</div>


<div class=" col-sm-4 col-md  col-12 col">
<h5 class="headin5_amrc col_white_amrc pt2">Доставка по всей России</h5>
<h5 class="headin5_amrc col_white_amrc pt2 fright">Ремонтируем и <p>строим вместе!</p></h5>
</div>
</div>
</div>


<p class="text-center">Copyright @2019: </a></p>
</footer>


    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>

there is a media query in css/style.css that should hide the footer at screen sizes below 480

@media only screen and (max-width: 480px) {
  footer {display:none;}
}

Where is the joint? :C When the browser is compressed, the footer is not hidden, but spreads over the entire page, or does the media query not work when the browser is "compressed"? Not very strong in media queries, but you need an adaptive page. Thanks in advance <3

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

Z

zoozag, 2019-02-01
@zoozag

Open the inspector and see what styles are applied to the footer.
Most likely you have styles for .footer or .sticky-bottom.
The class selector is more specific than the type selector.
Well, I also support advice about the order of connecting styles.