在 Shopify 中删除 Google 表单下方的大空白区域（无引导程序）

Question

晚上好，

因此，我正在为客户创建 Shopify 登录页面，他们希望在内容的右侧有一个联系表单，我在不使用 Bootstrap 的情况下创建它时遇到了一个小问题。但是，他们还希望在表单底部使用一个图像作为一种横幅。我试过直接将图像添加到页面中，但它会一直模糊，所以我直接将图像称为 scr。问题是表单和图像之间有大量空白，我不太确定如何调整。登陆页面的代码如下（我知道这很混乱，但在 Shopify 中似乎无法使用 CSS 样式，所以我在 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%" />

为方便起见，我已从标题为“内容”的第一个类中删除了实际内容，因此代码块尽可能整洁。我已经尝试重新排列表单本身的边距，但这并没有真正做任何事情。如果我让表单保持正常大小，它似乎不会在底部留出太多的空白，但我想将它缩小一点，以防止表单与其他内容相比太大。

我还添加了相关空白区域的图像。任何帮助将不胜感激，希望我的代码块格式正确以便于阅读。提前谢谢你。

White space issue

Answer 1

在您的 div.form 中将您的 transform: scale(0.9); 更改为 transformX: scale(0.9); transform 正在调整 X（水平）和 Y（垂直）的大小，您只希望它水平发生。

将图片直接放在 div.form 内的 iframe 下：

</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 中删除填充顶部。