Удалить Bootstrap Top Margin - PullRequest
Новая
       11

Удалить Bootstrap Top Margin

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

У меня в макете Bootstrap есть следующее, 

<div class="row mt-4" id="content">
    <div class="col owl-carousel">
        <div class="slide text-center">
            <div class="innerslide">
                <h1>Registered In Total So Far</h1>
                    <p class="split-para align-middle">Total: <span id="total-registered"></span></p>
                    <p class="split-para align-middle">Durban: <span id="durban-registered"></span></p>
                    <p class="split-para align-middle">Pietermaritzburg: <span id="pmb-registered"></span></p>
            </div>
        </div>
        <div class="slide text-center">
            <div class="innerslide">
                <h1>Registered In Last Hour</h1>
                <p class="split-para">Total: <span>409</span></p>
                <p class="split-para">Durban: <span>345</span></p>
                <p class="split-para">Pietermaritzburg: <span>74</span></p>
            </div>
        </div>
    </div>
</div>

То, чего я пытаюсь добиться, это установить строку margin-top mt-4 в 0, как только экран окажется между определенной шириной. Проблема, с которой я сталкиваюсь, заключается в том, что при просмотре страницы в альбомном режиме на планшетах или телефонах определенного размера она перемещает содержимое далеко вниз, потому что я использую класс с фиксированным нижним значением для строки нижнего колонтитула.

Example of too much margin Example of too much margin

Что я хотел бы сделать, это удалить это поле, если экран находится в портретном режиме и на этой ширине. Использование Responsinator, если я правильно понимаю. Это происходит, когда ширина ландшафта составляет от 667 до 736 пикселей.

Это в основном то, чего я пытаюсь достичь:

Example of required view

Я пробовал использовать следующий код, но, похоже, он ничего не меняет: 

@media (min-width: 650px) and (max-width: 768px) {
    #content {
        margin-top: 0;
    }
}

Я надеюсь, что это имеет смысл, и был бы рад предоставить дополнительную информацию, если потребуется.

Спасибо.

РЕДАКТИРОВАТЬ: Решение просто разместить правильный код здесь на случай, если это поможет кому-то еще. Спасибо за помощь! 

@media screen and (orientation: landscape) {
  #content {
    margin-top: 0 !important;
  }
}
...