[Помогите] Стиль модуля "Последние"

Тема в разделе "OpenCart", создана пользователем Дмитрич, 29 июн 2014.

  1. Дмитрич

    Дмитрич

    Регистрация:
    10 апр 2014
    Сообщения:
    182
    Симпатии:
    23
    Добрый день!

    Подскажите, пожалуйста, как подправить стили модуля «последние», чтобы на странице всегда отображались по 4 товара в ряд вне зависимости от разрешения экрана и браузера!
    Почему-то на ноуте всё в порядке, а на 2х3 мониторе смотря чем страницу смотришь и какое разрешение, масштаб. Часто по 3 товара в ряд выстраивает, хотя места хватает на четвёртый.
    Шаблон и модуль стандартные, ocStore-1.5.5.1.2.
     
  2. zvizdunov

    zvizdunov

    Регистрация:
    31 май 2014
    Сообщения:
    105
    Симпатии:
    33
    Для того чтобы всегда было три, нужно либо установить фиксированную ширину блока с картинкой и фиксированную ширину блока контента, тогда на любом экране будет одинаково.
    Либо, если ширина блока контента меняется в зависимости от ширины экрана, выставить ширину блока с картинкой в процентах от ширина блока контента.
     
    Дмитрич нравится это.
  3. Дмитрич

    Дмитрич

    Регистрация:
    10 апр 2014
    Сообщения:
    182
    Симпатии:
    23
    Спасибо, теорию я понимаю, но как лучше практически и где?
    Я так понимаю, что у меня ширина задана, а разделение идёт автоматом. Почему тогда оно то на 4, то на 3 делит, если ширина не меняется? Что будет, если ширину добавить? Ведь есть ещё правая и левая колонки...
    Вот кусок стилей, кажется это нужный:
    /* box products */
    .box-product {
    width: 100%;
    overflow: auto;
    }
    .box-product > div {
    width: 168px;
    display: inline-block;
    vertical-align: top;
    margin-right: 20px;
    margin-bottom: 20px;
    }
    --- Добавлено, 29 июн 2014 ---
    #column-left .box-product > div , #column-right .box-product > div{
    width: 155px;
    margin-right: 0px;
    }

    #column-left + #column-right + #content .box-product > div {
    width: 119px;
    }
     
  4. zvizdunov

    zvizdunov

    Регистрация:
    31 май 2014
    Сообщения:
    105
    Симпатии:
    33
    .box-product {
    width: 100%;
    overflow: auto;
    }
    Это ширина блока контента с товаром (средняя колонка).
    Вместо 100% напишите нужный Вам размер в пикселях (например 700px; )


    .box-product > div {
    width: 168px; - это ширина блока с товаром, установите значение в пикселях такое, чтоб в строку помещалось нужное количество товаров.
     
    Дмитрич нравится это.
  5. Дмитрич

    Дмитрич

    Регистрация:
    10 апр 2014
    Сообщения:
    182
    Симпатии:
    23
    Не очень мне хочется так фиксировать. Что тогда получится? Где-то центральный блок вылезет за рамки, а где-то будет не по всей ширине центра висеть....
    Может вместо 168px поставить 25%?
    Но как тогда поведут себя картинки и текст? Будут масштабироваться или прокрутка пойдёт?
     
  6. zvizdunov

    zvizdunov

    Регистрация:
    31 май 2014
    Сообщения:
    105
    Симпатии:
    33
    Без разницы будет значение блока с одним товаром в процентах или пикселях, оно всегда будет одинаковым на любом устройстве, если задать фиксированную ширину блоку родителю.
    Сейчас у Вас
    .box-product {
    width: 100%;

    То есть берётся процент от чего-то и при изменении размера окна, меняется размер блока в котором умещаются товары.
    Сделайте этот блок фиксированным и он вместе с товарами будет одинаково смотреться на любом устройстве.
    А ещё лучше зафиксируйте всю область контента.
     
    Дмитрич нравится это.
  7. Дмитрич

    Дмитрич

    Регистрация:
    10 апр 2014
    Сообщения:
    182
    Симпатии:
    23
    Я боюсь порушить стили. Кроме вот этой небольшой неприятности - всем доволен.
    Я имел в виду, что весь родительский блок может вылезти, если его не в процентах, а в пикселях задать.
    Пока уменьшил margin-right: с 20px; до 7px; и ввёл margin-left: c тем же параметром, чтобы блок в лево не уезжал. Стало лучше, только на IE по 3 штуки в ряд выставляет, хотя места хватает, вроде.
    За что отвечает width: 168px - я так и не понял. Уменьшал его до 120, но визуально ничего не менялось, так и оставалось по 3 в ряд, а не по 4.
     
  8. zvizdunov

    zvizdunov

    Регистрация:
    31 май 2014
    Сообщения:
    105
    Симпатии:
    33
    Дайте, пожалуйста сайт, и опишите какую ширину хотите, посмотрю, что можно сделать.
     
    Дмитрич нравится это.
  9. Дмитрич

    Дмитрич

    Регистрация:
    10 апр 2014
    Сообщения:
    182
    Симпатии:
    23
    Спасибо, я изменил отступы и теперь в подавляющем большинстве случаев выводится по 4 товара в строке. Не хочу играться с шириной среднего окна, чтобы боковые не нарушить. Можно считать, что вопрос решён. Спасибо Вам за соучастие.