Дисплей: нет Недвижимость не работает на адаптивном сайте - PullRequest
Новая
       9

Дисплей: нет Недвижимость не работает на адаптивном сайте

0 голосов
/ 09 июня 2018

Я # борюсь с проблемой медиа-запроса.

В разделе ПРОЕКТЫ я хочу, чтобы отображались 3 карты, и я хочу сделать это, чтобы скрыть карту 4 на DESKTOP.

Когда я на мобильном телефоне, я хочу, чтобы вторая (Alias ​​Photography) карта появлялась ПЕРВОЙ, поэтому я хочу скрыть карту 1.

На маленьких экранах, поэтому все, что ниже 575px, я установил card-1 для отображения свойства: нет.ЭТО РАБОТАЕТ

Но когда я масштабируюсь до чего-то большего, чем 575px, свойство display: none на card-4 НЕ РАБОТАЕТ, и я думаю, что оно не будет работать.

Пожалуйста, кто-нибудь может проверить мой код на моем сайте, чтобы понять, почему это может происходить?ниже ссылка на мой сайт, который я делаю в настоящее время.

www.oliver-stott.co.uk

Ответы [ 3 ]

0 голосов
/ 09 июня 2018

Мне удалось решить эту проблему, и я обнаружил, что моя карта автоматически настроена на dieplay: block при сбросе css.

это означает, что дисплей: нет;не будет переопределять свойство display: block.

Простое исправление (не идеальное, но пока подойдет) - установить следующий CSS для элемента, который вы хотите скрыть.

.card{                         //This was the CSS applied to ALL cards
    margin: auto;
    padding: 0;
    display: inline-block;  
    vertical-align: middle;
}
.card-4{                      // This is the CSS applied to card 4
    display: none !important;
}
0 голосов
/ 09 июня 2018

Я бы порекомендовал проверить документы по начальной загрузке: https://getbootstrap.com/docs/4.1/utilities/display/

На четвертой карте попробуйте использовать d-sm-block d-md-none, например: 

<div class="card col-sm-8 col-md-3 m-3 d-sm-block d-md-none">
...
</div>

Дайте мне знать, если это работаетпо назначению

0 голосов

Если вы создаете сайт с помощью Dreamweaver, у меня была такая же проблема.Я исправил это, когда заметил, что настольная версия наследует стили от мобильной версии.Так что, если вы даете определенный элемент показа: нет;в стилях для мобильных телефонов, и вы хотите, чтобы он отображался на рабочем столе, вы должны изменить стиль на рабочем столе для отображения: блок.И наоборот, если вы хотите что-то показать на мобильном телефоне, а не на рабочем столе.Надеюсь, я был полезным.

...