Сайты на заказ > Сайтостроение > Адаптивная ширина полей Contact Form 7

Адаптивная ширина полей Contact Form 7

Адаптивная ширина полей Contact Form 7При создании одного из сайтов поставил плагин Contact Form 7. Редко им пользуюсь, есть более современные и не такие заброшенные аналоги.

При тестировании для мобильных (да, представьте, сдавая проект я смотрю как он смотрится на телефоне: а вы проверяли, как выглядит ваш сайт на мобиле?) обратил внимание на то, что плагин то устарел, и не адаптирован. Ширина полей в нем по умолчанию задается в пикселях, а не в процентах.

Понятно, что для разработчиков предусмотрена документация и там все описано, но 99% тех кто ставит себе этот плагин - это обычные пользователи, вообще не понимающие ничего в коде. Они поставили плагин и хотят чтобы он просто работал. А тут такая засада.

Верстка уплывает.

Адаптивная ширина полей Contact Form 7

Естественно, решение есть. Для модификации стандартных стилей используются медиа-запросы @media.

Например, в указанном выше случае необходимо добавить в стили следующий код.

 

add_action( 'wp_head', function () { ?>
<style>

@media only screen and (max-width : 767px) {.wpcf7 input[type="tel"], .wpcf7 input[type="email"], .wpcf7 textarea, .wpcf7 input[type="text"] {
width: 95%;}}
@media only screen and (max-width : 600px) {.wpcf7 input[type="tel"], .wpcf7 input[type="email"], .wpcf7 textarea, .wpcf7 input[type="text"] {
width: 95%;}}
@media only screen and (max-width : 480px) {.wpcf7 input[type="tel"], .wpcf7 input[type="email"], .wpcf7 textarea, .wpcf7 input[type="text"] {
width: 95%;}}
@media only screen and (max-width : 360px) {.wpcf7 input[type="tel"], .wpcf7 input[type="email"], .wpcf7 textarea, .wpcf7 input[type="text"] {
width: 95%;}}

</style>
<?php } );

Добавить комментарий

Ваш адрес email не будет опубликован.

Copyright © 2021, GuruSite24. Копирование материалов сайта запрещено.
menu-circlecross-circle