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

Question

[Андрей Титов]

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


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

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

Answer 1

[Denis]

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

<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;
}

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

Comments

[Андрей Титов]

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

[Denis]

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

[Андрей Титов]

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

[Denis]

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

Answer 2

[boga-net]

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

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

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

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

Comments

[Андрей Титов]

boga-net - в сообщении ниже фрагмент кода предоставил, который видимо за переход ширины отвечает - посмотрите, что там можно поменять?

[boga-net]

Андрей Титов, в том, что вы прислали ничего не отвечает за кнопку. НО сейчас я посмотрел на скриншот снова и увидел класс "js-openMobileForm", что намекает на версию с изменением стиля в js скрипте

Answer 3

[Орхан Гасанлы]

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

Comments

[Андрей Титов]

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
  }
}

[Орхан Гасанлы]

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

[Андрей Титов]

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

[Орхан Гасанлы]

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