如何在Shopify Atlantic主题中将iframe地图尺寸更改为全屏

Question

我正在使用Atlantic主题，并为Map创建了一个新页面。 我使用了下面提到的以下代码

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d27728.56583382997!2d-95.647502!3d29.688729!3m2!..." width="800" height="600" frameborder="0" style="border:0;" allowfullscreen="">

请帮助我将其缩放到完整尺寸，我使用了创建新的布局方法，但仍然无法正常工作。 仅当我将布局写为null {％layout none％}时，它才起作用 但我希望通过主题 我不想使布局为空。 屏幕截图如下

Answer 1

使用CSS将<iframe>的高度和宽度设置为100％：

html, body, iframe {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

proof of concept fiddle

代码段：

html,
body,
iframe {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3466.07056567071!2d-95.64969038455021!3d29.688733742242416!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8640df708f47547b%3A0x21b117877ecdc1e7!2sMW%20Furniture%20Outlet!5e0!3m2!1sen!2sus!4v1571677313661!5m2!1sen!2sus"
  frameborder="0" style="border:0;" allowfullscreen=""></iframe>