Как расширить окно выбора количества товара?

3 ответа

• популярные
• новые

• 3

  replicant 17 марта 2023 15:09 #

  Для этого надо править CSS стили в вашей теме дизайна. Не зная темы, не зная о каком сайте речь, помочь невозможно, увы. В общих чертах надо изменить свойство width элемента input для этого шаблона.
  
  Вот например как выглядит ширина 30 точек
  

  

  А вот уже 80 точек
  

  

  
  

  Вот как-то так и надо сделать.
  

  ответить
• 1

  Вячеслав Кустков 22 марта 2023 16:09 #

  Тема дизайна «Euroshop» 1039853 1.5.0.0
  

  Сайт lanset.ru
  
  Я так понимаю где то здесь?
  
  
  

  /* START Инпут количества */

  .e-controls-counter {

  display: inline-block;

  text-align: center;

  vertical-align: middle;

  position: relative;

  }

  input.e-controls-counter__input {

  width: 48px;

  height: 38px;

  line-height: 34px;

  padding: 0 14px 0 4px;

  border: 2px solid #e5e5e5;

  background-color: #fff;

  text-align: center;

  outline: 0;

  box-sizing: border-box;

  font-size: 14px;

  }

  .e-controls-counter__controls {

  position: absolute;

  right: 8px;

  top: 0;

  width: 8px;

  height: 34px;

  font-size: 12px;

  padding: 2px 0;

  }

  .e-controls-counter__control {

  display: block;

  height: 17px;

  line-height: 17px;

  position: relative;

  width: 14px;

  }

  .e-controls-counter__control i {

  position: absolute;

  line-height: 8px;

  font-size: 12px;

  }

  .e-controls-counter__control i:before {

  line-height: 8px;

  display: inline-block;

  }

  .e-controls-counter__control_down i {

  top: 0;

  left: 0;

  }

  .e-controls-counter__control_up i {

  bottom: 0;

  left: 0;

  }

  /* END Инпут количества */
  
  
  -----------------------------------------------------
  

  наверное width: 48px; но я меняю значение а на сайте никаких изменений не происходит

  ответить
  • +1

    replicant 22 марта 2023 23:27 #

    Есс-но не происходит, потому что на сайте подключена минифицированная версия. Либо замените версию, либо меняйте прямо в минифицированном файле. На скриншоте название используемого файла подчеркнуто.

    

    
    И немного лирики.
    
    По опыту скажу, что от минифицированных таким образом CSS выигрыша особо уже нет, а возни с редактированием прилично. Вполне можно применять некий усредненный вариант, когда и лишнего нет, но ещё сохранена читабельность текста.

    
    Т.е. если оригинал такой (566 байт)
    

    .h-promo {
        background: var(--h-promo-bg);
        color: var(--h-promo-color);
        display: block;
        padding: 9px 0 10px;
        position: relative;
        width: 100%;
    }
    .h-promo__wrap {
        padding-top: 3px;
        position: relative;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
    }
    .h-promo__close {
        cursor: pointer;
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
    }
    .h-promo__icon {
        line-height: 1.6;
        margin-right: 20px;
    }

    Минифицированная версия, ещё пригодная для чтения, будет такая. Один класс - одна строка (410 байт)
    

    .h-promo{background:var(--h-promo-bg);color:var(--h-promo-color);display:block;padding:9px 0 10px;position:relative;width:100%}
    .h-promo__wrap{padding-top:3px;position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}
    .h-promo__close{cursor:pointer;position:absolute;right:30px;top:50%;transform:translateY(-50%);z-index:1}
    .h-promo__icon{line-height:1.6;margin-right:20px}

    Хардкорная минификация для чтения совершенно неудобна (404 байта)
    

    .h-promo{background:var(--h-promo-bg);color:var(--h-promo-color);display:block;padding:9px 0 10px;position:relative;width:100%}.h-promo__wrap{padding-top:3px;position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.h-promo__close{cursor:pointer;position:absolute;right:30px;top:50%;transform:translateY(-50%);z-index:1}.h-promo__icon{line-height:1.6;margin-right:20px}

    Как видим ради этих 6 байт нужно жертвовать читабельностью, а выигрыш в размере на уровне погрешности.
    
    На более объемном реальном CSS на 200 кБайт выигрыш около 4 кБайт за счет пустых строк, комментариев и т.п. В то же время между красивой версией и хардкорной уже около 55 кБайт.
    
    Т.е. смысла в хардкорной минификации нет от слова совсем, а если производится сжатие средствами веб-сервера, то и подавно такая нечитабельная версия может быть заменена без каких бы то ни было потерь на ту, которую реально читать.
    
    Если планируете работать со своей темой дизайна в дальнейшем, то рекомендую позаботиться о некотором удобстве кода в том числе без ущерба для всего остального.
    

    ответить