Адаптация формы обратной связи под мобильную версию сайта Есть решение

Добрый день!

Подскажите, пожалуйста, как сделать что бы форма обратной связи подгонялась под экран в мобильной версии сайта?

7 ответов

  • 2

    предоставьте ссылку на страницу с формой

  • 2
    Bubble Buddy Партнер-разработчик 14 ноября 2016 20:59 # Решение

    Добавьте это в ваш css

        /* Custom, iPhone Retina */ 
        @media only screen and (min-width : 320px) {
    .wa-form {
        display: block;
        width: 100%;
    } 
    .wa-form .wa-field .wa-name {
        width: 100% !important;
    }
    .wa-form .wa-field .wa-value {
    margin:0 !important;
    }
    .wa-form .wa-field .wa-value input[type="text"], .wa-form .wa-field .wa-value input[type="email"], .wa-form .wa-field .wa-value input[type="password"] {
        width: 100%;
    }     
        }
    
        /* Extra Small Devices, Phones */ 
        @media only screen and (min-width : 480px) {
    .wa-form {
        display: block;
        width: 100%;
    } 
    .wa-form .wa-field .wa-name {
        width: 100% !important;
    }
    .wa-form .wa-field .wa-value {
    margin:0 !important;
    }
    .wa-form .wa-field .wa-value input[type="text"], .wa-form .wa-field .wa-value input[type="email"], .wa-form .wa-field .wa-value input[type="password"] {
        width: 100%;
    }     
        }
    
        /* Small Devices, Tablets */
        @media only screen and (min-width : 768px) {
    .wa-form {
        display: block;
        width: 100%;
    } 
    .wa-form .wa-field .wa-name {
        width: 100% !important;
    }
    .wa-form .wa-field .wa-value {
    margin:0 !important;
    }
    .wa-form .wa-field .wa-value input[type="text"], .wa-form .wa-field .wa-value input[type="email"], .wa-form .wa-field .wa-value input[type="password"] {
        width: 100%;
    }     
        }

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите