Приложение в WordPress не подходит для мобильного экрана

У меня есть сайт WordPress, где я добавил небольшое приложение html, CSS, Js «BraSizeCalculator».

Когда я размещаю это приложение на сайте бесплатного хостинга ( https://brasizecalculator.000webhostapp.com/ ), он отлично выглядит на мобильном экране. Значение отображения всего приложения на мобильном экране выглядит скорее миниатюрой исходного приложения.

Но как только я добавлю его на страницу WordPress, только половина приложения отображается на мобильном экране и не позволяет прокручивать по горизонтали. ( http://sklep.opulenzaactive.com/jak-sie-mierzyc/ )

Таким образом, я изменил элементы CSS, чтобы они имели размеры в процентах (например: ширина: 23%). в ниже сайта WordPress. ( http://sklep.opulenzaactive.com/deelliiee/ )

Он еще в стадии разработки, но мне нужно знать, можно ли посмотреть ( https://brasizecalculator.000webhostapp.com/ ) как на этом сайте .. или .. я должен придерживаться выше (sklep.opulenzaactive .com / deelliiee /)?

Лучший подход был бы таким же, как toscho в комментариях – написать свой собственный скрипт, сделав его мобильным с самого начала. Но если вы хотите быстрое, временное решение, вы можете сделать что-то вроде этого:

<div id="maincontainerWrapper" style="overflow: auto;"> <div id="maincontainer" style="position: relative;"> ... </div> </div> 

то ваше приложение калькулятора будет доступно в полной ширине, перетащив его влево и вправо, что будет неудобно и неинтуитивно для ваших пользователей.