Вход • Регистрация

Как уменьшить отступ

  •
  • 11 сентября 2017 г.
  • Добрый день!
    Прошу не судить строго, все новое, немного торможу. Подскажите как уменьшить отступ между фото и Описанием
    на примере этого товара https://krikta.ru/shop/ulichnoe-oborudovanie/ukryvnoy-material/izdeliya/pristvolnyy-krug-d04m-s-uf/
    Заранее спасибо.
    •
    • 11 сентября 2017 г. , редакция: 11 сентября 2017 г.
    • Вам со стилями надо поиграться немного, но совсем близко не получиться сделать так белый фон на самом фото сильно большой
      • 11 сентября 2017 г.
      • Хотя нет можно обработкой фотографий это сделать, но не известно как другие фото к этому отнесутся.
        Проще уже сразу фото красиво обрезать и залить.
    • 11 сентября 2017 г.
    • Смотря что вы понимаете под "отсутпом".
      Как уже отметил Михаил, на странице по ссылке у вас используется изображение с обширным белым фоном.

      При этом на странице создаётся впечатление, будто изображение маленькое, а отступ большой. Но в действительности это не так.
      Вот ваше изображение: https://krikta.ru/userfls/shop/large/370_pristvolnyy-krug-d04m-s-uf.png

      Как вариант, можно взять имеющееся изображение и перед использованием обрезать его (см. прикреплённый файл), а затем заменить старое изображение на новое в админ-панели.
    •
    • 11 сентября 2017 г. , редакция: 11 сентября 2017 г.
    • Более интересна в данном контексте вот эта страница. Изображение товара на ней не высокое, однако, страница имеет очень большой отступ по высоте. И выглядит это не очень хорошо.

      В данном случае можно подправить CSS-стили в файле /custom/my/css/main.css, а именно:

      отступ блока с фотографиями (margin) уменьшить с 70 до 40 (строка 1647):
      Код
      .pics {
      float: left;
      margin: 41px 0 40px;
      width: 578px;
      max-width: 100%;
      }
      И фиксированную высоту блока убрать (строка 1653):
      Код
      .pics__big, .pics__mini {
      position: relative;
      float: right;
      margin-bottom: 10px;
      width: 450px;
      max-width: 100%;
      /*
      height: 555px;
      line-height: 550px;
      */
      text-align: center;
      background: rgb(255, 255, 255);
      }

  •
  • 11 сентября 2017 г. , редакция: 11 сентября 2017 г.
  • Спасибо большое! Поправил но в каталоге все поплыло, комментировать не стал
    •
    • 11 сентября 2017 г. , редакция: 11 сентября 2017 г.
    • Есть кнопочка спасибо Правда не большая
      • 11 сентября 2017 г.
      • Да яж не клянчу, ни в коем случае, а написал человеку что тут такая штука имеется.
    •
    • 11 сентября 2017 г.
    • Мишаня ну ё маё. стирай пока Виталик не заметил.
    •
    • 11 сентября 2017 г. , редакция: 11 сентября 2017 г.
    • Цитата
      Поправил но в каталоге все поплыло, комментировать не стал
      Странно. Я создал стили через "Stylish", и у меня в каталоге никаких изменений и в табличном виде ни в виде списка.
      Может не там смотрю, а может быть это потому, что в обозначенных мною стилях фигурирует по 2 селектора:
      1. .pics__big
      2. .pics__mini
      1. .pics__big__img
      2. .pics__mini__img
      Но изменять надо только селекторы __big__. Попробуйте не править, а дописывать ниже (прямо под ними):
      Код
      .pics__big {
      height: 555px;
      line-height: unset
      Код
      .pics__big__img {
      vertical-align: top;
      }

Новости

  • Вышла очередная сборка DIAFAN.CMS 7.2.2
  • 18 июня
  • В сборке большое обновление demo-шаблона, дополнительная защита от спама, улучшение YML-импорта и еще много важного и интересного.
  • Не пропустите сборку DIAFAN.CMS 7.1.4
  • 24 апреля
  • В новой сборке совершили революцию в структурировании кастомизированной информации в шаблонах, добавили авторегистрацию пользователей, усовершенствовали защиту от спама, актуализировали накопительную скидку, а также улучшили производительность и стабильность работы системы.
  • Сборка DIAFAN.CMS 7.1.3
  • 12 января
  • После выхода сборки 7.1 мы выпустили уже три патча, в каждом из которых улучшаем административную часть сайта. Сборка DIAFAN.CMS 7.1.3 уже доступна к установке. 
Все новости

Форум

Перейти на форум