Html CSS位置相对div没有响应

你好，我有一个背景，我想添加div在它上面，就像这张图片 im使用bulma css框架 我能够通过编写代码来实现这种外观

index.html

    <div class="section newsletter">
    <figure class="image">
        <img src="src/img/newsletter.png">
    </figure>
            <div class="form">
                <h5>Keep updated with out latest news.<br>Subscribe to our newsletter</h5>
                <div class="field has-addons">
                    <div class="control">
                        <input class="input" type="text" placeholder="Enter Your Email">
                    </div>
                    <div class="control">
                        <a type="button" class="button btn-grad is-dark">
                            Subscribe
                        </a>
                    </div>
                </div>
            </div>
</div>

}

问题是它在手机或平板电脑上没有响应能力 看起来像这样

im使用相对位置，可以将div放在图像顶部 我如何才能做得更好，例如，使其响应性更好？ 图片下方还有一个很大的空白，我不知道为什么

实时项目回购

---

现场概述：

这可能是3个问题的组合

1确保你有

2对于超出最小可能视口的容器，不要使用硬编码尺寸。请注意，表单的宽度设置为588px。尝试做宽度：自动；最大宽度：588px；相反

3考虑不要硬编码你的定位。尝试将相对定位的容器置于中心位置

看起来真的很漂亮，干得好！旁白：出于可访问性的目的，始终将标签绑定到输入被认为是良好的做法。如果你不想让它可见，那没关系

我采取了以下措施，以使表单居中：

随时更新我们的最新消息。订阅我们的时事通讯 订阅

---

非常感谢你的回答，我试过了，但是没有成功，现在我试着给这个div一个背景图像，在它里面放一个另一个div，给它加上边距或者其他什么，但是也失败了：你能提供整个页面的上下文吗？一定有其他更高层次的东西影响着事情。编辑了我的回复！只是要小心养成一些坏习惯！这里有一个表单，它应该使用表单元素，您可以使用type=submit的按钮提交表单元素。相反，您使用一个带有锚定标记的div进行提交。祝你好运您好，我刚刚尝试了您的代码复制和粘贴，它在台式平板电脑和移动设备中看起来像这样：很抱歉看到这样。我没有注意到Chrome上的任何问题。您是否使用任何类型的自动刷新来管理其他浏览器的CSS前缀？

.newsletter{
padding:0px;
.form{
    display: flex;
    flex-direction: column;        
    width:588px;
    height:297px;
    background: $bg-transperant;
    box-shadow: 0px 5px 14px rgba(0, 0, 0, 0.15);
    border-radius: 16px;
    // Layout
    position: relative;
    left: 140px;
    top: -386px;
    h5{
        padding: 50px 60px 40px 60px;
        font-weight: 600;
        font-size: 25px;
        line-height: 46px;
        color: #2F4B6E;
    }
    div{
        justify-content: center;
    }
    .input{
        height: 50px;
        width: 352px;
        box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.15);
        border-bottom-left-radius: 100px;
        border-top-left-radius: 100px;
    }
}

.newsletter {
  padding: 0px;
  background-image: url('src/img/newsletter.png');
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;

  .form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-height: 270px;
    max-width: 320px;
    background: $bg-transperant;
    box-shadow: 0px 5px 14px rgba(0, 0, 0, 0.15);
    border-radius: 16px;

    // Layout
    h5 {
      padding: 50px 60px 40px 60px;
      font-weight: 600;
      font-size: 25px;
      line-height: 46px;
      color: #2f4b6e;
    }

    div {
      justify-content: center;
    }

    .input {
      height: auto;
      height: 50px;
      width: 352px;
      box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.15);
      border-bottom-left-radius: 100px;
      border-top-left-radius: 100px;
    }
  }
}