Я пытаюсь добавить форму Google на свой мобильный сайт. Я хочу, чтобы он занимал всю ширину экрана. Вот мой html:
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSc5jGXQ0hGA14kFnw4OGRE9aExMNtKNwHKWn-2CSUwti3CfbA/viewform?embedded=true" width="100%" height="95%" id="mobileContactForm" frameborder="0" marginheight="0" marginwidth="0" >Loading…</iframe>
Связанный CSS выглядит следующим образом:
#mobileContactForm{
padding: 0;
margin-top: 5vh;
margin-bottom: 5vh;
}
Когда я загружаю эту веб-страницу в Google Chrome на свой рабочий стол с размером окна при соотношении сторон смартфона он выглядит нормально, правильно занимая всю ширину веб-страницы: Google Form на моем рабочем столе.
Однако, когда я загружаю ту же страницу в chrome на моем телефоне (Samsung Galaxy s8) с обеих сторон формы есть огромное белое пространство, которое по какой-то причине кажется очень маленьким: Форма Google на моем веб-сайте
Свойство ширины в теге iframe установлено значение 100%, поэтому я не уверен, почему на моем телефоне это так отличается от моего рабочего стола. Кто-нибудь знает, есть ли способ сделать форму правильного размера на мобильном телефоне или почему это происходит?
Спасибо