Тема proStore имеет "резиновый" макет.
Это означает, что она растягивается на всю ширину экрана, каким бы он не был.
Все элементы дизайна имеют значения ширины в процентах (от полной ширины экрана).
Получается, что на широких экранах, например более 1361px (1360 px – это примерная ширина экрана 15'' ноутбука. Всё, что выше – это либо редкие 17'' ноутбуки, либо широкоформатные настольные мониторы.) сайдбар становится слишком широким и занимает много полезного пространства.
Для того, чтобы сузить сайдбар, необходимо создать блок prostore.user_css.
Затем в него нужно добавить следующий код:
/*CSS правила действуют при ширине экрана более 1361px*/
@media (min-width: 1361px) {
/*ширина сайдбара*/
.sidebar_holder, .sidebar_offset {
width: 18%;
}
/*ширина контента*/
.content_holder {
width: 82%;
}
}Вы можете уменьшить ширину экрана, при которой будут действовать эти стили, заменив цифру 1361 на своё значение. Но лучше НЕ ставить цифру меньше 1281.
Также вы можете выставить свои значения ширины сайдбара и блока с контентом.
Главное, чтобы значения ширины в сумме не превышали 100%.
16 комментариев
подскажите, для темы super - это работает? Добавил код в пользовательский файл, крутил проценты в разные стороны, но размер сайдбара не изменяется при высоких разрешениях.
или в этой теме иные классы для сайдбара используются?
Темы разные. Конечно, там другие классы используются.
ясно. не напишите для super? сайдбар действительно великоват на больших разрешениях.
Попробуйте этот код:
/*CSS правила действуют при ширине экрана более 1361px*/ @media (min-width: 1361px) { /*ширина сайдбара*/ .offcanvas-custom { width: 18% !important; } /*ширина контента*/ .maincontent { width: 82% !important; } }все ок. спасибо.
Нет. поторопился. Эта конструкция также сужает блоки Характеристики и Покупки на странице товара (либо блок Фото) . В результате справа образуется пустое пространство.
Оберните вашу конструкцию кодом:
{if $action !== 'product'}{* сверху *} {/if}{* снизу *}да. спасибо.
Нашел тему (ранее направлял инфо на почту). Лучше тут видимо, так как сохранится для других. Вопрос выше остался - но только на Главной странице, на остальных это поле после обертки убралось. Как-то возможно решить?
Попробуйте добавить ещё вот этот код:
.grid-main { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }Чтобы получилось так:
/*CSS правила действуют при ширине экрана более 1361px*/ @media (min-width: 1361px) { /*ширина сайдбара*/ .offcanvas-custom { width: 18% !important; } /*ширина контента*/ .maincontent { width: 82% !important; } /* выравнивание контента 82% по центру */ .grid-main { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } }не получилось. Полоса разделилась на Главной на две - слева и справа стало поле.
Я не вижу проблемы, если честно.
Вы хотели ограничить ширину – ширина ограничена.
Красный баннер растянуть на всю ширину экрана не получится, т.к. он внутри контейнера, который имеет ограничения по ширине. Чтобы его "растянуть", нужно лезть в код и вносить правки. Но это уже другая история.
Изначально это ваша статья об ограничении сайд бара, так как на широких экранах он занимает четверть экрана, а это выглядит странно. Естественно это и мое желание. Без дополнительного кода красный баннер нормально отображается - во всю ширину , как и слайдер. Конечно, ради сужения сайдбара можно принять эти две полосы на главной (раз уж вы говорите, что ничего невозможно сделать), но при наличии этих двух полос наблюдается явный дисбаланс блока Новинки/Лучшее - видно, что урезается вывод одного товара справа. В результате Блок получается перекошен в левую сторону. Наверное так не должно быть в рабочей теме?
Во-первых, у вас всего 4 товара в списке "лучшее".
Откройте новинки, там будет 5 товаро и "перекос" виден не так значительно.
Во-вторых, чтобы убрать лишний отступ у баннера добавьте ещё этот код:
.home-banner1-html, .home-banner2-html, .home-banner3-html, .home-banner3-html, .home-banner5-html, .home-banner6-html { margin-left:0 !important; }P.S.
Изначально эта статья писалась под другую тему с совершенно другой архитектурой.
Я пошёл вам на встречу и дал код под другую тему, но не надо забывать, что архитектура этой темы отличается от архитектуры темы, под которую написана данная статья.
Эти две линии для баннера не принципиальны (последний код вроде ничего не поменял). Так что оставляем как есть. Критичен был перекос с Новинками, но там было недоразумение с количеством товаров в списке. Спасибо.