笔记本电脑和台式机上的CSS响应问题

Question

我正在尝试使我的订阅表单具有响应性，并使其上方的联系表单内联。这是当前在笔记本电脑视图中的外观。我能够准确地将其与笔记本电脑，平板电脑和移动设备视图对齐。 （第一个屏幕截图）

但是后来我意识到，订阅表单在桌面视图上仍然更长。出于某种原因，即使在屏幕尺寸较小的笔记本电脑视图上完美匹配，980px的像素在桌面视图上还是太宽。 （第二张屏幕截图）

这使调整媒体查询变得有些困难。在这种情况下，有人可以提出任何建议吗？

<style>

  .mc4wp-form {
    margin: 0 auto; !important;
    max-width: 990px; !important;
    text-align: center;
}


  /*Media Queries below */


   /*FOR DESKTOP */
   @media screen and (max-width: 1400px) {
   .mc4wp-form {
      margin: 0 auto;
      text-align: center;
      width: 85%; !important;
      margin-top: 0;
  }


     /*FOR LAPTOP */
   @media screen and (max-width: 1295px) {
   .mc4wp-form {
      margin: 0 auto;
      text-align: center;
      width: 30%; !important;
      margin-top: 0;
  }


   /*FOR TABLET AND MOBILE */  
  @media screen and (max-width: 767px) {
  .mc4wp-form {
      margin: 0 auto;
      text-align: center;
      width: 100%; !important;
      margin-top: 0;
  }



</style>

Answer 1

.mc4wp-form {
    margin: 0 auto; !important;
    max-width: 990px; !important;
    text-align: center;
}

好像您有语法问题。 “ auto”和“ 990px​​”后不应有分号。您会看到Chrome检查器在控制台中抛出语法警告。

修订：

.mc4wp-form {
    margin: 0 auto !important;
    max-width: 990px !important;
    text-align: center;
}