Как выяснить и устранить причину пропадания кнопки при изменении ширины экрана?

Question

Андрей Титов @titov_andrei

All my life I learn - and die a fool!

Как выяснить и устранить причину пропадания кнопки при изменении ширины экрана?

Кнопка появляется только при установке определённой ширины экрана

Блок с элементами определил - но какой стиль отвечает за отображение кнопки - не пойму.

И как сам файл со стилями найти - /wp-content/themes/novocentre/css/styles.css?ver=075aea8db6f2b78682bcb18a5b427ed4? Что за ver - Что это?

Вопрос задан более трёх лет назад
360 просмотров

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 1

4 комментария

Андрей Титов @titov_andrei Автор вопроса

quasko - в последний блок - это в какой? navWrap? то есть просто поменять стиль элемента всё же не получиться? Просто сайт на WP и там можно прикрутить в настройках дополнительный стиль, который перекроет основные. А менять вёрстку - это лезть в файлы, а WP он такой, что в одном месте поменяешь структуру вёрстки и неизвестно где и что вылезет. Временный костыль прикрутить бы, а потом со структурой разберусь и поправлю вёрстку. Есть какое то решение без добавления элементов?

Написано более трёх лет назад
Denis @quasko

В текущей ситуации получается что на разных разрешениях экрана показываются разные блоки html, т.к. одна версия менюшки (с двумя кнопками) скрывается, а другая(с одной кнопкой) показывается. Здесь либо менять логику отображения блоков, что повлечет за собой написание стилей для дополнительного разрешения, либо изменять верстку блока (добавление кнопки в блок).

Написано более трёх лет назад
Андрей Титов @titov_andrei Автор вопроса

quasko, получается правильнее сразу поменять вёрстку, так как не понятно зачем реализовали разделение блока кнопок и отделение одной от другой - видимо кнопка "обратной связи" появилась позже и её не удачно попытались интегрировать в текущую вёрстку? так?

Написано более трёх лет назад
Denis @quasko

Правильнее конечно использовать один и тот же блок html кода, но с разными стилями на различных устройствах/разрешениях, но в текущем проекте придется переписывать много логики.
Сейчас самый быстрый вариант, это скопировать html код нужной кнопки в нужный блок, и возможно добавить немного css для новой кнопки.
Почему образовалась такая ситуация с разными блоками/кнопками могут ответить только прошлые разработчики)

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 2

2 комментария

4 комментария

Андрей Титов @titov_andrei Автор вопроса

azerphoenix - есть вот такой фрагмент кода и как раз при переходе ширины с 800 на 801 и происходит трансформация кнопки. И что тут можно поменять или добавить?

@media screen and (max-width:800px) {
  .bracesBlock .row {
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start
  }
  .bracesBlock .clm {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0px;
    -webkit-flex: 1 1 0;
    flex: 1 1 0
  }
  .bracesBlock-left img {
    max-width: 100%;
    height: auto
  }
  .bracesBlock-right {
    padding-left: 0;
    margin-top: 30px
  }
}

Написано более трёх лет назад

Орхан Гасанлы @azerphoenix

Андрей Титов, сложно что-то скачать не видя сайта. Суть данного медиазапроса заключается в том, что он применяется при разрашении экрана от 0 до 800 пикс. Соответственно, если вам нужно отображать кнопку и если стиль этой самой кнопки включен в указанный медиазапрос, то можете достать его отдельно, добавить отдельный медиа запрос и разрешении экрана поставить больше... например 1920 пикс.

Написано более трёх лет назад
Андрей Титов @titov_andrei Автор вопроса

azerphoenix, а если в текущих стилях поменять 800 на другое значение - чем это может быть чревато в будущем, если сразу "кривость" не вылезет?

Написано более трёх лет назад
Орхан Гасанлы @azerphoenix

Андрей Титов, внутри данного медиа запроса есть какие-то другие стили, которые не относятся к кнопке. Соответственно, эти элементы будут видны в больших разрешениях.

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+2 ещё

Средний
Как правильно вставлять изображения при наличии двух тем оформления сайта?
- 1 подписчик
- час назад
- 48 просмотров
1

ответ
HTML

+1 ещё

Простой
Как в теге select один символ сделать другого цвета?
- 1 подписчик
- 2 часа назад
- 60 просмотров
1

ответ
CSS

Простой
Как уместить кроссбраузерную поддержку в одну строку?
- 1 подписчик
- 2 часа назад
- 68 просмотров
1

ответ
HTML

+1 ещё

Простой
Как поставить элементы в одну строку и выровнять их?
- 1 подписчик
- 17 часов назад
- 73 просмотра
1

ответ
HTML

+1 ещё

Простой
Почему не работает pattern на input?
- 1 подписчик
- 17 часов назад
- 64 просмотра
2

ответа
JavaScript

+3 ещё

Простой
Как стилизовать пагинацию постов по определённому признаку?
- 1 подписчик
- 18 часов назад
- 68 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как отобразить массив из элементов?
- 1 подписчик
- 19 часов назад
- 87 просмотров
0

ответов
WordPress

Простой
Как сделать ссылку на полное изображение?
- 1 подписчик
- 20 часов назад
- 43 просмотра
2

ответа
HTML

+2 ещё

Простой
Как подкрасить 2 блока в разные цвета по всей ширине в дочернем Blade-шаблоне?
- 1 подписчик
- 20 часов назад
- 53 просмотра
2

ответа
WordPress

+2 ещё

Простой
Как добавить счетчик яндекс метрики в elementor без плагинов?
- 1 подписчик
- 20 часов назад
- 61 просмотр
2

ответа
Показать ещё Загружается…

JavaScript разработчик

summer • Ярославль

от 100 000 до 140 000 ₽

Junior JavaScript Developer

КРАФТТЕК • Санкт-Петербург

от 60 000 до 80 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Собрать сайт на Vue / Laravel

19 апр. 2024, в 11:14

65000 руб./за проект

Отрисовка дизайна главной и внутренней

19 апр. 2024, в 11:08

5000 руб./за проект

Работы по АСУТП

19 апр. 2024, в 10:59

150000 руб./за проект

Answer 1 · 2018-07-06 10:36:52

Добрый день!
Кнопка "обратная связь" на скрине это элемент

<div class="navMobile-body-nonres js-openMobileForm" style="cursor: pointer;">ОБРАТНАЯ СВЯЗЬ</div>

Он находится в родительском блоке

<div class="navMobile js-navMobile open" style="height: 770px;">

который отображается только на экране до 800px

@media screen and (max-width: 800px)
.navMobile {
    display: block;
}

А когда "кнопка пропала", это уже отображается другой блок html, в котором находится только кнопка "пожертвовать"

Который на экране до 800px скрыт

@media screen and (max-width: 800px)
.navWrap {
    display: none;
}

В итоге можно в последний блок добавить недостающую кнопку как вариант

Answer 2 · 2018-07-04 22:36:22

Если пропадает или появляется при определённый ширине, то значит ищите стили в media queries

слева на скриншоте вы навели на элемент. У его родителя (navMobile-body-bottom) в атрибуте style задаётся display: block. Скорее всего через скрипт задаётся display: none

И как сам файл со стилями найти

кликните по style.css?ver=_b.... что справа.

Answer 3 · 2018-07-04 23:02:09

Здравствуйте. Найдите ширину экрана при которой кнопка видна. Обычно стили заданы в файле style.css и если они видны при определенной ширине, то значит добавлен в виде медиа запросов.
В консоли браузера ищите что-то media ....
Например, media (min-width:768px) AND (max-width:1024px) {} и т.д. соответственно минимальная и максимальная ширина будет указывать на то, при каком разрешении отображать этот элемент. А на ver... можете не обращать внимания. Сам файл стилей лежит в папке с темой.

Как выяснить и устранить причину пропадания кнопки при изменении ширины экрана?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт