Скрытие элемента с помощью медиа-запроса - PullRequest
Новая
       9

Скрытие элемента с помощью медиа-запроса

0 голосов
/ 30 мая 2018

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

    @media screen and (max-width: 600px) {
  .icon-bar {
    display: none;
  }
}



.icon-bar {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

.icon-bar a:hover {
  background-color: #000;
}

.facebook {
  background: #3B5998;
  color: white;
}


.content {
  margin-left: 75px;
  font-size: 30px;
}

 HTML CODE 



    <div class="icon-bar">
          <a href="https://facebook.com/spartansafety" target="_blank" class="facebook"><i class="fa fa-facebook"></i></a>
          <a href="https://twitter.com/spartansafety01?lang=en" target="_blank" class="twitter"><i class="fa fa-twitter"></i></a>
          <a href="https://www.instagram.com/spartansafety/" target="_blank" class="instagram"><i class="fa fa-instagram"></i></a>
          <a href="https://www.linkedin.com/in/spartan-safety-limted-78a585156/" target="_blank" class="linkedin"><i class="fa fa-linkedin"></i></a>
        </div>

Ответы [ 2 ]

0 голосов
/ 30 мая 2018

попробуйте разместить все ваши медиа-запросы внизу порядка файлов кода, по размеру, где наименьшее - внизу

0 голосов
/ 30 мая 2018

Если вы используете загрузчик 4, то нет необходимости использовать пользовательский медиазапрос, используйте класс начальной загрузки 4

d-md-inline d-sm-none d-none для отображения только на носителеи большой экран 

<div class="icon-bar">
      <a href="https://facebook.com/spartansafety" target="_blank" class="facebook d-md-inline d-sm-none d-none"><i class="fa fa-facebook"></i></a>
      <a href="https://twitter.com/spartansafety01?lang=en" target="_blank" class="twitter d-md-inline d-sm-none d-none"><i class="fa fa-twitter"></i></a>
      <a href="https://www.instagram.com/spartansafety/" target="_blank" class="instagram d-md-inline d-sm-none d-none"><i class="fa fa-instagram"></i></a>
      <a href="https://www.linkedin.com/in/spartan-safety-limted-78a585156/" target="_blank" class="linkedin d-md-inline d-sm-none d-none">

вы можете прочитать подробнее здесь: http://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements

...