[Помогите] с версткой на главной странице

Тема в разделе "OpenCart", создана пользователем inilol, 7 окт 2015.

  1. inilol

    inilol

    Регистрация:
    18 фев 2013
    Сообщения:
    66
    Симпатии:
    2
    Помогите с версткой на сайте llip.by главная страница.

    Блоки «Новые услуги» и «Отзывы клиентов» хочу сделать похожими на вышестоящие «Рекомендуемые» и «Новые поступления».

    Пробовал просто копировать стили, не получилось.
     
  2. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    2.051
    Симпатии:
    778
    Конечно не получилось, там ведь разная вёрстка. Нужно скопировать и вёрстку, тогда стили будут работать.
     
  3. inilol

    inilol

    Регистрация:
    18 фев 2013
    Сообщения:
    66
    Симпатии:
    2
    Вы имеете ввиду что 4 и 2 столбца? Сделал сейчас 4 столбца и видно что размеры и отступы блоков разные.
    Беру с блока рекомендуемые <div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12"> все стили

    width: 25%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    box-sizing: border-box;
    font-family: "Open Sans",sans-serif;
    font-weight: 400;
    color: #666;
    font-size: 12px;
    line-height: 1.42857;

    Добавляю в блоки <div class="content-records column_width_5">

    И блоки все равно не находятся по одним и тем же линиям.
     
  4. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.121
    Симпатии:
    560
    Просто взять обернуть в ту структуру, которая идет выше и все, не нужно ни каких стелей писать.
     
  5. inilol

    inilol

    Регистрация:
    18 фев 2013
    Сообщения:
    66
    Симпатии:
    2
    пример можете показать? а то не врубаюсь
     
  6. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.121
    Симпатии:
    560
    Вот так примерно нужно обернуть ваш вывод
    PHP:
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <
    div class="product-thumb transition">
            <
    div class="image">
                <
    a href="http://llip.by/stroitelnye-materialy/profnastil-stenovoj.html">
                    <
    img class="img-responsive" title="Профнастил стеновой" alt="Профнастил стеновой" src="http://llip.by/image/cache/catalog/Metalloprokat/sten_prof-200x200.jpg">
                </
    a>
            </
    div>
            <
    div class="caption">
                <
    h4><a href="http://llip.by/stroitelnye-materialy/profnastil-stenovoj.html">Профнастил стеновой</a></h4>
                <
    p>Виды оказываемых услуг по электромонтажным работам  Услуга установки приборов освещения (люстрбрасветильников)  Услуга создания декоративного освещения. </p>
            </
    div>
            <
    div class="button-group">
                <
    class="button btn btn-primary seocms_further" type="button"><span class="hidden-xs hidden-sm hidden-md">Подробнее</span></a>
            </
    div>
        </
    div>
    </
    div>