Удаление большого пустого пространства под формой Google в Shopify (без начальной загрузки) - PullRequest
Новая
       60

Удаление большого пустого пространства под формой Google в Shopify (без начальной загрузки)

0 голосов
/ 17 октября 2018

Добрый вечер,

Итак, я работаю над целевой страницей Shopify для клиента, и они хотят, чтобы в правой части контента была форма для контакта, что у меня было очень маленькой проблемой, создаваябез использования Bootstrap.Тем не менее, есть также изображение, которое они хотели бы использовать в нижней части формы как своего рода баннер.Я попытался просто добавить изображение на страницу сразу, но оно будет постоянно размытым, поэтому я назвал изображение напрямую как scr.Проблема в том, что между формой и изображением существует большое количество пустого пространства, и я не совсем уверен, как это отрегулировать.Код для целевой страницы приведен ниже (я знаю, что он довольно грязный, но не похоже, что стилизация CSS возможна в Shopify, поэтому я делаю встроенные стили в редакторе HTML). 

<div class="container" style="display: grid; grid-template-columns: repeat(12, 1fr);">

<div class="content" style="grid-column: span 5; padding-top: 50px;">

<div class="form" style="grid-column: span 7; padding-left: 20px;
transform: scale(0.9);"><iframe src="https://docs.google.com/forms/d/e/1FAIpQLSd7ZZat96_IBMo8eiOrCWFvS0jkZdQKXJXBY1EucosaQ7ZOcQ/viewform?embedded=true"
width="640" height="2161" frameborder="0" marginheight="0" 
marginwidth="0"></iframe></div>

</div>

<img src="https://user-assets-unbounce-com.s3.amazonaws.com/7f3b837c-ab0b-44ad-9174-023129a4e0b5/4de43676-3a0a-485c-a45d-d87af9c7ed96/screen-shot-2018-10-08-at-1-45-11-pm.original.png" width="100%" />

Для удобства я удалил фактический контент из первого класса под названием «контент», поэтому блок кода является максимально беспорядочным.Я попытался изменить поля для самой формы, но на самом деле ничего не сделал.И если я оставлю форму с ее обычным размером, она не будет давать столько пустого пространства внизу, но я хотел немного ее уменьшить, чтобы форма не была такой большой по сравнению с другим содержимым.

Я также добавил изображение рассматриваемого белого пространства.Любая помощь будет принята с благодарностью, и, надеюсь, мой блок кода отформатирован правильно для удобства чтения.Заранее благодарим.

Проблема с пробелами

1 Ответ

0 голосов
/ 17 октября 2018

В вашем div.form измените ваше transform: scale(0.9); на transformX: scale(0.9); преобразование, изменив его размер X (по горизонтали) и Y (по вертикали), и вы хотите, чтобы это происходило только горизонтально.

поместите ваше изображение прямо подiframe внутри div.form: 

</iframe>

<img src="https://user-assets-unbounce-com.s3.amazonaws.com/7f3b837c-ab0b-44ad-9174-023129a4e0b5/4de43676-3a0a-485c-a45d-d87af9c7ed96/screen-shot-2018-10-08-at-1-45-11-pm.original.png" width="100%" />

  </div>

вы можете удалить верхнюю часть отступа из div.content.

...