html - 删除 Shopify 中 Google 表单下方的大空白区域(无 Bootstrap )

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 中移除 padding top。