Ankhena

https://jsfiddle.net/2vrcbh3k/

<span contenteditable="true">0</span>

span {
  display: inline-block;
  min-width: 70px;
  outline: 1px solid #999;
}
span::after {
  display: inline-block;
  content: "i";
  width: 15px;
  height: 15px;
  line-height: 15px;
  background: skyblue;
  text-align: center;  
}

https://jsfiddle.net/L30qqawj/ либо трансформациями
www.cssportal.com/style-input-range
А это для коллекции ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html

https://jsfiddle.net/9v8sgpjk/
я только не уверена в cursor:none, что он всюду будет none

Никак не пойму как сделать чтобы окно прокручивалось (не его содержимое, а само окно) если по высоте оно больше чем экран браузера юзера. Как такое реализуется? плиз хэлп

max-height: 100vh;
overflow: auto;

длина текста было 200-300 пикселей

если длина текста, это ширина, то так и пишите

.text-block {
  width: 200px;
}

или

.text-block {
  min-width: 200px;
  max-width: 300px;
}

страница и так по умолчанию 100%

Либо нормально сформулируйте или нарисуйте что вам нужно

Может, обойтись простым CSS?
https://jsfiddle.net/5fag4k8L/

prompt - окошко для ввода текста
appendChild - добавит нового "ребенка"

На указанном сайте пометка о цвете/теме сайта хранится в cookies.
http://jquery.page2page.ru/index.php5/Работа_с_cookie

Класс не применяется потому что вес селектора .service__sect-content_accordeon_item p выше, чем у .active
Читайте про специфичность селекторов

<figure>
<img>
<div class="social"></div>
</figure>

figure {
position: relative;

}
.social {
position: absolute;
задаем нужное положение
на выбор: display:none; opacity:0 или visibility: hidden (могу быть еще варианты позиционирования куда-нибудь за край блока или экрана, но их опустим)

}

img:hover + .social {
возвращаем display, opacity или visibility
}

Также необходимо согласовать размеры картинки и figure.

Альтернативный вариант, применять hover к figure, а не к картинке figure: hover .social {}.

Вначале ставите в настройках виджета ширину в 2 раза больше той, которая нужна.
Дальше нужно перебить стили, в том числе инлайновые и размеры вставленные атрибутами. Т.е. через JS.
Ширину всюду уменьшить в 2 раза, высоту соответственно увеличить.
Поправить отступы.
Я использовала флексбоксы для линии аватарок.

Я в настройках поставила ширину 500px, в 2 ряда не вышло, но это вы уже подгоните сами.