Доброго дня друзья, есть футер
код страницы<!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>
есть медиа запрос в css/style.css, который должен скрывать футер при размерах экрана ниже 480
@media only screen and (max-width: 480px) {
footer {display:none;}
}
Где косяк? :C При сжатии браузера футер не скрывается, а расползается на всю страницу, или же медиа запрос не отрабатывает при "сжимании" браузера? Не шибко силен в медиа запросах, а нужна адаптивная страница. Заранее спасибо <3
Средний
Средний