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

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

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

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

enter image description here

enter image description here

<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>
评论
  • Linda
    Linda 回复
    .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;
    }