ProjectSoft

object-fit для нормальных браузеров.
и полифилл для IE/Edge https://github.com/bfred-it/object-fit-images/

caniuse.com/#feat=object-fit

img {
    max-width: 100%;
    height: auto;
    display: block;
}

или

img {
    width: 100%;
    height: auto;
    display: block;
}

https://www.npmjs.com/package/less

Так вы же постоянно добавляете, а не заменяете текст в onAddToParent. Притом при закрытии балуна явно сигнализирует об отсутствии обработки события onRemoveFromParent, где при таком подходе стоит удалять содержимое.

убрать margin-bottom не? и делать это в css, а не в параметрах виджета.

Часто замечаю, что в ajax запросах используют json для подгрузки страницы

Людям просто лень думать, и действуют по привычке.
Если нужно просто загрузить с сервера кусок html и вставить в страницу, то оборачивать все это дело в JSON не имеет никакого смысла.

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

Вы говорите что изучали HTML+CSS+JS - заметьте, это только фронтэнд. То есть внешнее оформление. Даже обладая этими навыками без знаний серверного программирования вы можете делать сайты намного интереснее чем с использованием конструкторов просто используя подходящую для вашей задачи CMS. Например MODx обладает широчайшими возможностями так как это не ограниченная по функционалу CMS начального уровня (условно выражаясь) а фреймворк, позволяющий создавать функционал сайта, который неспособны предоставить конструкторы, например листание взад вперед позиций каталога, многоуровневое меню какой угодно конфигурации, использование ajax. Конечно хорошо бы для MODx знать PHP и уметь писать под него плагины и сниппеты, но можно обойтись и без него просто зарегистрировавшись в комьюнити с целью поиска готовых решений.

Комментаторы сверху немного странные вещи предлагают.
На самом деле всё намного проще:
document.querySelector("button").onclick = run;

Когда вы указываете оператор () - вы вызываете функцию а её результат попадает в onclick, вам же нужно чтобы в onclick попала ссылка на функцию.

var scrollHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);

вообще для того, чтобы вызывать событие (обработчики события) на каком-то элементе есть функция .trigger() - api.jquery.com/trigger
я бы попробовал ну нужном поле после заполнения его вызвать эту функцию.

Да как два пальца, чувак.

Заходишь на сайт, жмешь CTRL+P, выбираешь Adobe PDF, меняешь формат бумаги (тостер, например, при печати в формат А4 печатается в планшетной версии) и открываешь PDF в иллюстраторе. Всё! Вместо текста, правда, будут кракозябры, но форматирование и вёрстка сохранятся, как и иконки.

https://vk.com/dev/
https://vk.com/dev/photos

если между h3 всегда p то так:

$('h3').siblings('p').wrap('<div class="content"></div>');

UPD:

$('h3').nextUntil('h3').wrap('<div class="content"></div>');

UPD2:
вот так кароче)

$('h3').each(function() {
    	$(this).nextUntil('h3').wrapAll('<div class="content"></div>');
  });

https://jsfiddle.net/duc68fmL/6/