Здравствуйте!
Делаю форму заказа, столкнулся с проблемой, как её сделать адаптивной для разных размеров экрана.
Сама форма формируется путем помещения туда html
через js
. В popup_text
помещаю что мне нужно. Стиль под каждый экран меняю так:
if (document.documentElement.clientWidth <768) {
$('.popup-content').css({'width': '80%', 'height': '80%'});
}
else if (document.documentElement.clientWidth <992) {
$('.popup-content').css({'width': '60%', 'height': '60%'});
}
else{
$('.popup-content').css({'width': '320px', 'height': '690px'});
}
Все это можно посмотреть здесь , нажав на кнопку заказать(блок, который висит слева). Базовый стиль задан так же для формочки с благодарностью(можете попробовать отправить данные, они идут на почту для отладки) и имеют размер 250px
, который смотрится хорошо на всех экранах.
Собственно, вопрос:
Какие стиле мне нужно задать popup-content
, чтобы она хорошо смотрелась на мобильных/планшета/пк и т.д?
Долго эксперементировал, в итоге что-то запутался.
Спасибо.
media
не подстраиваешь?media
, но он будет для одной определенной формы.