Closed Arcturuss closed 3 years ago
vasja-slvm
commented
3 years ago Шапка сайта не работает нормально на полной ширине на экране если это немного больше 1200
Алсо, у меня упорно никак не отображает слопывание шапки даже на меньшей ширине :(
Arcturuss
commented
3 years ago вижу две с половиной проблемы:
отступ фиксится просто: body { margin-top: 80px; }
80 px достаточно, чтобы логотип не наползал на текст
переключение на мобильную версию лучше поменять в scss - переопределить переменную бутстрапа. а то там слишком дофига стилей, замучаешься их по одному переопределять. типа так:
$screen-sm: 1090px;
$screen-sm-min: $screen-sm;
$screen-tablet: $screen-sm-min;
@import 'bootstrap';на работоспособность не проверял. ширину в 1090 определил экспериментальным путем с учетом фиксов ниже. для мобил может быть недостаточно.
слегка причесать шапку. html блока с балансом. заворачиваем текст в span, чтобы можно было его скрывать и оставлять только шкалу:
<li>
<a href="/chart">
<span class="navbar-collapsible">
Баланс: <b>3558.96</b>
</span>
<meter high="75" low="25" max="100" min="0" optimum="100" value="21.0">
(21.0%)
</meter>
</a>
</li>css
@media (max-width: 1290px) {
/* убрать подпись у баланса */
.navbar-collapsible {
display: none
}
/* уменьшить логотип */
.navbar-brand {
padding: 8px 15px;
line-height: 10px;
}
.navbar-brand img {
width: 50px;
height: 38px;
object-fit: contain;
}
}
abitrolly
commented
3 years ago Боюсь что все дизайнеры "в отпуске", но если будет PR, то я не вижу причин чтобы его задерживать.
Шапка сайта нормально работает только на полной ширине. Если уменьшать ширину - шапка увеличивается в высоту и закрывает контент.
При ширине меньше 768 px шапка переключается в "мобильный режим" с одной иконкой, но 768 - это очень мало. На современных мобилах этого не хватает, и шапка отображается в десктопном варианте.
десктоп
мобила