删除 Shopify 中 Google 表单下方的大号白色 space（否 Bootstrap）

Question

晚上好，

所以我正在为客户制作一个 Shopify 登陆页面，他们想要在内容的 right-hand 一侧有一个联系表格，我在不使用 Bootstrap。但是，他们还想在表单底部使用一张图片作为一种横幅。我试过直接将图像添加到页面中，但它总是很模糊，所以我直接将图像称为 scr。问题是表格和图像之间有大量白色space，我不太确定如何调整它。着陆页的代码如下（我知道它很乱，但在 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," 的第一个 class 中的实际内容，以便代码块尽可能整洁。我曾尝试重新排列表格本身的边距，但这并没有真正起到任何作用。如果我让表格保持正常大小，它似乎不会在底部给出那么多的白色 space，但我想将它缩小一点以防止表格与其他内容

我还添加了一张有问题的白色 space 的图像。任何帮助将不胜感激，希望我的代码块格式正确以便于阅读。提前谢谢你。

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

删除 Shopify 中 Google 表单下方的大号白色 space（否 Bootstrap）

Removing large white space underneath Google Form in Shopify (No Bootstrap)

html

css

whitespace

shopify

removing-whitespace