Отключить вертикальную границу при изменении размера веб-сайта на мобильный

#html #css #responsive-design #border

#HTML #css #адаптивный дизайн #граница

Вопрос:

Итак, у меня есть это как нижний колонтитул, но я хочу, чтобы вертикальные линии исчезали, когда размер экрана становится меньше 740 пикселей. Возможно, правило мультимедиа. Когда я изменяю размер экрана мобильного устройства, вертикальные линии все еще портят мой дизайн, и мне нужен код, который отключает их для экрана с разрешением widht менее 740 пикселей.

  <div id="footer1" >
<div class="container">
  <div id="big-footer1" class="row">

    <div class="desktop-4 tablet-2 mobile-3 alpha">

    </div>

    <div class="desktop-4 tablet-2 mobile-3">





    </div>       

    <div id="social-icons" class="desktop-4 tablet-2 mobile-3 omega">

    </div>


  </div>   


#big-footer1 { 
border-top: 1px solid {{ settings.footer-top-border }}; 
 margin-bottom: 20px; 
 margin-top: 20px;
  border-bottom: 1px solid {{ settings.footer-bottom-border }}; 
 padding: 30px 0 30px; 
 list-style-type: none; 
 }

 #big-footer1 .alpha { border-right: 1px solid {{ settings.dotted_color }}; }
 #big-footer1 .omega { border-left: 1px solid {{ settings.dotted_color }}; }

 #big-footer1 { color: {{ settings.footer-text-color }}; }
 #big-footer1 a { color: {{ settings.footer-text-color }}; }

 #big-footer1 h4 {
 margin-bottom: 30px;
 color: {{ settings.footer-header-color }}; 
 display: block;
 text-transform: uppercase; 
}

 #big-footer1 > div { padding: 0 20px; min-height: 120px;}


 #big-footer1 ul {
 list-style: none;
 margin: 0;
 line-height: 34px;
}

#big-footer1 ul li { display: inline-block; margin: 0 5px; }

#footer1 { background: {{ settings.footer-background }}; padding-bottom: 20px; text-      align: center; }

1. Вы пробовали просто использовать медиа-запрос?

2. Я добавил это, но все еще не работает. @media handheld { #big-footer1 .alpha { граница справа: 0 пикселей сплошная {{ settings.dotted_color }}; } #big-footer1 .omega { граница слева: 0 пикселей сплошная {{ settings.dotted_color }}; } }

3. Это тип носителя. Вам нужно запросить функцию мультимедиа (например max-width ), и я бы не стал использовать handheld , просто придерживайтесь screen . Смотрите мой ответ ниже.

Ответ №1:

Этот вариант использования может быть обработан медиа-запросами. Похоже, что для этого потребуется максимальная ширина:

 foo {
    /* Normal styles */
}

@media screen and (max-width: 740px) {
    foo {
        /* Styles for under 740px */
    }
}

См. http://jsbin.com/bugay/1 /. Измените размер, чтобы увидеть, как это работает.

Подробнее о медиа-запросах здесь: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries