CSS responsive issues with MC4WP plugin

[durdygirdy]

I’m trying to make my MC4WP form responsive and inline with the contact form above it. This is what it looks currently with the laptop view. I was able to line it up accurately with the laptop, tablet, and mobile views. (First Screenshot)

But then I realized that the subscribe form is still slightly longer on the desktop view. For some reason, the of 980px is too wide on the desktop view even though its the perfect fit on the laptop view which is a smaller screens size. (I would post a second screenshot but I’m only allowed one unfortunately)

This has made adjusting the media query a little difficult. Can anyone make any recommendations in this situation?

    <style>

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


      /*Media Queries below */


       /*FOR DESKTOP */
       @media screen and (min-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>

[ruenel]

Hello Norris,

Thanks for writing in! Your CSS code is incorrect. Please have it updated and use this instead:

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


/*Media Queries below */


/*FOR DESKTOP */
@media screen and (min-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;
  }
}

To learn more about the proper way of use CSS @media property, please check this out:

• https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Hope this helps.