在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%" />

为简便起见，我从标题为“ content”的第一类中删除了实际内容，因此代码块尽可能整洁。 我尝试过为表格本身重新设置边距，但这并没有做任何事情。 而且，如果我将表单保留为正常大小，那么底部似乎不会提供太多空白，但是我想将其缩小一些以防止表单与其他内容相比太大。

我还添加了有关空白的图像。 任何帮助将不胜感激，希望我的代码块的格式正确，易于阅读。 先感谢您。

空格问题

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