Бывают ситуации, когда необходимо в пределах одного блока Mobirise, скрыть один элемент, а второй, оставить. Например, есть блок:
Как скрыть отображение иконки в центре на мобильной* версии, чтобы остальные остались?
*Либо, скрыть с десктопной версии и оставить только на мобильной?
В прошлой заметке, мы разобрались, что зная класс CSS элемента, можно скрыть данный элемент в блоке. Однако, если мы используем данный подход, у нас будут скрыты все иконки в данном блоке. Поэтому, сейчас разберем с вами, как можно скрыть только один элемент нужного класса, при этом, оставить другие.
Перед любыми внедрениями правок в код, создавайте резервные копии своих проектов. Данная заметка, подразумевает, что вы ознакомлены с предыдущей заметкой.
В примере, буду использовать блок «Особенности» с бесплатной темы Mobirise 5:
Мы будем скрывать только одну иконку, что по центру:
Теперь, открываем редактор кода:
Ищем нужный класс CSS в HTML коде для центрального элемента. Как это сделать, описано в заметке «Как скрыть элементы на сайте для мобильной версии или наоборот в Mobirise?».
В нашем случае, это класс:
iconfont-wrapper
Обратите внимание, что данный класс iconfont-wrapper, применим в HTML в трех местах данного блока, так как отвечает за отображение иконок в блоке (у нас три иконки в блоке). Выберите ту иконку, которая вам нужна. В нашем примере, это иконка по центру. Уловили суть?
Теперь, нам необходимо перед нужным классом, указать следующий адаптивный класс:
d-none d-md-block
Его необходимо указать перед классом CSS элемента с иконкой:
iconfont-wrapper
Выглядеть должно все примерно так:
<div class="d-none d-md-block iconfont-wrapper" mbr-if="showIcon">
Смотрим результат:
Видим, что на мобильной версии, у нас не отображается иконка по центру. При этом, все отображается на десктопной версии:
Небольшое видео, для наглядности процесса:
Как скрыть элемент в блоке на конструкторе Mobirise?
Бывают ситуации, кода нам нужно скрыть отображение вообще полностью на всех устройствах, только один элемент в блоке. Тогда, нам нужно добавить перед нужным классом (по аналогии выше):
d-none
Элемент перестанет отображаться на всех устройствах. Это удобно, так как остальные элементы данного класса, останутся отображаться.
Данная информация, подготовлена на основе официальной документации Bootstrap. В примере выше, использовались классы CSS из таблицы.
Не хотите самостоятельно вникать в материал или нужна помощь в создании сайта на конструкторе Mobirise? Закажите разработку сайта у проверенного исполнителя. Либо:
1. Биржа фриланс услуг. Стоит рассмотреть для жителей Украины (много исполнителей из Украины). Одна из надежных бирж фриланса в СНГ. В целом, данная биржа, работает с клиентами и исполнителями со всех стран бывшего СССР. Дискриминации на бирже, по политическим различиям – нет. Здесь ценят как заказчиков так и исполнителей. Узнать больше...
2. Считается биржа фриланса №1 в России. Работает с клиентами и исполнителями по странам СНГ. Много исполнителей из России и других стран СНГ. Узнать больше...
3. Выгодная биржа фриланса для заказчиков в плане доступности цен. Оптимальный вариант заработка для начинающих и опытных фрилансеров. Фриланс биржа, работает с клиентами и исполнителями из России и стран СНГ. Узнать больше...
Когда проверяете результат и у вас не отображаются изменения, не забывайте чистить кэш браузера. Перед любыми действиями с редактором кода, делайте всегда резервные копии своего сайта. Успехов.