Совместимость ширины формы браузера в @media

Question

У меня есть форма, wpcf7, и я использовал следующий CSS-код для ее центрирования, а другие div-ы, в середине страницы, в @media.

@media(min-width: 768px) 
{.wpcf7- 
form-control.wpcf7-submit {
display: flex;
justify-content: center;
}}
@media (min-width: 768px)  
{.contact::before, .contact::after
{display: flex;
justify-content: center;
}}@media (min-width: 768px) 
{.wpcf7{display: flex;
justify-content: center;
}} @media (min-width: 768px) 
{#anr_captcha_field_1{display: 
flex;justify-content: center; }}

В Apple Safari поля полей контактной формы имеют ширину примерно в 120 пикселей и растягиваются вправо, в Chrome / Chrome то же самое, в Chrome / Windows работает, в Explorer / Windows работает. Как исправить?

HTML здесь массивный, так как он включает в себя div из нескольких разделов, но вот некоторые:

<label> Your Name (required)<br />
<span class="wpcf7-form-control-wrap your-name"><input type="text" 
name="your-name" value="" size="40" class="wpcf7-form-control wpcf7- 
text wpcf7-validates-as-required" aria-required="true" aria- 
invalid="false" /></span> </label></p>
<p><label> Your Email (required)<br />
<span class="wpcf7-form-control-wrap your-email"><input type="email" 
name="your-email" value="" size="40" class="wpcf7-form-control 
wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates- 
as-email" aria-required="true" aria-invalid="false" /></span> 
</label></p>
<p><label> Subject<br />
<span class="wpcf7-form-control-wrap your-subject"><input 
type="text" name="your-subject" value="" size="40" class="wpcf7- 
form-control wpcf7-text" aria-invalid="false" /></span> </label></p>
<p><label> Your Message<br />
<span class="wpcf7-form-control-wrap your-message"><textarea 
name="your-message" cols="40" rows="10" class="wpcf7-form-control 
wpcf7-textarea" aria-invalid="false"></textarea></span> </label></p>
<p><div class="anr_captcha_field"><div id="anr_captcha_field_1" 
class="anr_captcha_field_div"></div></div><span class="wpcf7-form- 
control-wrap g-recaptcha-response"></span></p>
<p><input type="submit" value="Send" class="wpcf7-form-control 
wpcf7-submit" /></p>
<div class="wpcf7-response-output wpcf7-display-none"></div></form>. 
</div>
</div><!-- .entry-content -->

Answer 1

Из предоставленного кода похоже, что вы используете плагин Contact Form 7. Что если у вас есть целый кусок CSS, который поставляется с плагином, то это высокий вызов, чтобы ответить со 100% уверенностью,Тем не менее, вместо использования flex box для центрирования формы, почему бы не попробовать старый добрый margin:auto; для сортировки выравнивания.

Вот пример Fiddle https://jsfiddle.net/t8xLqr4y/

Как мы неу меня нет полного кода, который я добавил, и добавил пример обертывающего элемента div.Вы, вероятно, обнаружите, что у вас есть div с классом .wpcf7 или .wpcf7-form-control или что-то подобное, что вы можете использовать.Но в основном применяйте что-то вроде:

.example {
  margin: auto;
  width: 400px;
}

Старая школа margin:auto; делает центрирование для вас.Ширина обязательна, но вы также можете использовать max-width:400px;, чтобы сделать ее гибкой для меньшей ширины.

Чтобы заставить ваши поля ввода и текстовую область работать, вам необходимо установить их ширину 100%.и установите размер рамки в рамку для рамки.

.example input[type="text"], 
.example input[type="email"], 
.example textarea {
  box-sizing: border-box;
  width: 100%;
}

Они не должны быть равны 100%, они могут быть любой ширины, которую вы хотите, но я работаю в предположении, что вы хотите, чтобы они были полной шириной элемента обтекания.И, конечно, вы также можете использовать максимальную ширину, если вы хотите, чтобы они были полной ширины только тогда, когда окно сужается.

Редактировать Я понимаю, что не упомянул здесь медиа-запросы.Все вышеперечисленное можно обернуть в медиа-запрос по своему вкусу.Независимо от того, делаете вы это или нет, это не должно влиять на ваш подход.