在Shopify中移除Google表单下方的大空白（无引导）

Question

Good evening,

So I'm working on a Shopify landing page for a client, and they want a contact form on the right-hand side of the content, which I had a very little issue creating without the use of Bootstrap. However, there is also an image that they would like to use at the bottom of the form as a sort of banner. I have tried just adding the image to the page outright, but it would consistently be blurry, so I called the image directly as a scr. The issue is that there is a large amount of white space between the form and the image, and I'm not quite sure how to adjust that. Code for the landing page is below (I know it's quite messy, but it doesn't seem like CSS styling is possible in Shopify, so I'm doing inline styling within the HTML editor).

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

For sake of ease, I've removed the actual content from the first class titled "content," so the code block is as uncluttered as possible. I have tried rearranging the margins for the form itself, but that didn't really do anything. And if I leave the form at its normal sizing, it doesn't seem to give as much white space at the bottom, but I wanted to scale it down a bit to prevent the form from being so large in comparison to the other content.

I've also added an image of the white space in question. Any help would be greatly appreciated, and hopefully, my code block is formatted correctly for ease of reading. Thank you in advance.

White space issue

Answer 1

In your div.form change your transform: scale(0.9); to transformX: scale(0.9); transform is resizing it X (horizontally) AND Y (vertically) and you only want it to happen horizontally.

put your image directly under the iframe inside the 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>

you may want to remove the padding top from the div.content.