Html 如何使此表单响应移动应用程序？

我正在尝试我的弹出表单，但没有成功。 任何帮助都将不胜感激

这是登录页URL-yogavoga.com/2weekdiet

.modal {
  display: none; 
  position: fixed; 
  z-index: 1; 
  left: 0;
  top: 0;
  max-width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rga(0,0,0);
  background-color: rgba(0,0,0,0.85); 
      padding-top: 65px;

}


.modal-content {
  margin: 5px auto; 
  width: 95%; 
  background-color: #fefefe;
  border: 1px solid #888;border-width:3px;

}

我也希望它能对移动设备做出响应。

---

已尝试，但无法获得正确的结果。

您必须使用媒体查询使您的网站响应

以下是针对不同设备大小的媒体查询列表：

 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...} 

现在，您必须在上面的一个媒体查询中编写特定于设备的css。 比如：

---

向我们展示您当时尝试过的内容，并提供一个适当的版本。我添加的代码就是我尝试过的。。。也许有什么东西不见了，但我不知道具体是什么。光是这一点是不合适的。不，我们不想确定你提到的现场站点的其余部分，因为在你解决这个问题后，这可能会发生变化，这将使这个问题对于将来遇到类似问题的人来说是不完整的。所以，请添加一个适当的，并描述你想要达到什么——“不能得到正确的结果”告诉我们什么你会考虑正确的结果开始。不幸的是，仍然没有。一旦我打开表单，屏幕似乎越来越宽，我不知道如何修复它。你可以发布完整的表单，以及你在媒体查询中尝试了什么？有可能你错过了什么，因为这在所有情况下都有效。

@media only screen and (min-width: 600px) {
  .modal {
          //add Mobile specific css for responsive design.
  }
}