Внимание! Форум обновился

Stuppy

Ilya Antipin

Пользователь @ilya-antipin написал в Внимание! Форум обновился:

надо подумать, как правильнее сделать это.

Похоже, что никак. Все шрифты в абсолютных единицах, надо в каждом стиле ручками — так чтобы в одном мечте базовый размер выставить — нельзя. Потому, просто немного увеличить масштаб страницы для данного сайта. Я 110% поставил, уже ок.

Pixxxel

@ilya-antipin по верстке есть несколько моментов. Класс col-md-1 много где используется в сетке, но он тесноват выходит по факту. https://gyazo.com/3164cab77efa43070f23a9bcbeca90b9
https://gyazo.com/894c44dd0caebd95baa254deed0db19e
Задан как 8.33% от контейнера, но контейнер на десктопе ограничен 1170px. Это что-то совсем мало. Сейчас десктоп как правило ограничивают 1920px. В итоге много свободного места и большие уши по бокам, а контент не умещается.

Ilya Antipin

@pixxxel а можете дать обновленный стиль для этого класса, как видите ок, я глянул бы, и может и применю?

Pixxxel

@ilya-antipin
Я бы для контейнера стили подправил. ширину сделать 100%, а максимальную ширину ограничить 1920 например, чтобы хотя бы те кто с десктопа могли видеть страницу нормально. https://gyazo.com/fab1ad33ecdb80f8635efc44d047c24f

Pixxxel

Что-то типа такого https://gyazo.com/e84d23f4f22e80c5a9a02c85ad359f71
Только паддинги тоже увеличить надо на десктопном брейкпоинте

Pixxxel

И вот тут чисто визуально отступов не хватает https://gyazo.com/c3e8011fb7eed73ffa1f9611198808b0
Со стилями поковыряться бы в общем)

Ilya Antipin

@pixxxel а можете прям CSS текстом, чтобы мне тикеты невнятные не рисовать, а воткнуть сразу в пользовательский CSS/LESS и посмотреть, как оно?

Pixxxel

@ilya-antipin что-то типа такого с учетом существующих брейкпоинтов:

.container {
width: 100%;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;

@media(min-width: 768px) {
max-width: 750px;
padding-left: 30px;
padding-right: 30px;
}

@media(min-width: 992px) {
max-width: 970px;
padding-left: 45px;
padding-right: 45px;
}

@media(min-width: 1200px) {
max-width: 1920px;
padding-left: 60px;
padding-right: 60px;
}
}

Ilya Antipin

@pixxxel применил. Посмотрим. Надеюсь, без сайдэффектов )

Pixxxel

Даже лишнее убрать можно, один раз только ограничить максимальную ширину, но суть не поменяется

.container {
width: 100%;
max-width: 1920px;
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;

@media(min-width: 768px) {
padding-left: 30px;
padding-right: 30px;
}

@media(min-width: 992px) {
padding-left: 45px;
padding-right: 45px;
}

@media(min-width: 1200px) {
padding-left: 60px;
padding-right: 60px;
}
}

Ilya Antipin

@pixxxel done, спасибо!

Pixxxel

@ilya-antipin по-моему так лучше, правда на ширине экрана 1200-1500 все равно тесно, но 1500+ уже все норм

Pixxxel

@ilya-antipin еще в качестве эксперимента можно вот это попробовать

[data-widget-area="sidebar"] {
  @media(min-width: 1200px) {
    position: sticky;
    top: 60px;
  }
}

Из текущего дизайна так и просится! Для повышения конверсии так сказать, ну и справа при скролле чтоб пусто не было)))

Ilya Antipin

@pixxxel применил, спасибо.

Ilya Antipin

@tima54321 карма…

Pixxxel

@ilya-antipin рад помочь, если что - всегда к вашим услугам)

Sunny

@ilya-antipin Илья Игоревич, в форуме ответы идут к сообщению отдельно и ниже те же ответы повторно. Можно это как-то поправить?

doigralsy

@sunny а мне кажется, что это удобно… тем более ответ под комментарием сразу не открывается. И тебе видно, кто на его ответил.

Pixxxel

@ilya-antipin еще посмотрел относительно размера шрифта. Немного можно поправить вот этим стилем:

body {
    @media(min-width: 1200px) {
        font-size: 16px;
    }
}

Не прям все увеличивается, но бОльшая часть и вроде бы ничего нигде критично не едет.