How to Center Contact Form7 On Mobile Screens

Viewing 3 replies - 1 through 3 (of 3 total)
  • Justin P

    (@justinpartain)

    body .cf7-style.cf7-style-196 {
    background-color: #94c2ef !important;
    margin-top: 1px !important;
    margin-right: 65px !important;
    margin-bottom: 1px !important;
    margin-left: 65px !important;
    }

    The issue appears to be with the css you have. Remove the width and change the left and right margin 65px.

    If you didn’t set this. Then set the width to auto using !important.

    Justin P

    (@justinpartain)

    I forgot to mention, if you only want this css to affect mobile add the following CSS:

    @media (max-width:800px){
     body .cf7-style.cf7-style-196 {
     background-color: #94c2ef !important;
     margin-top: 1px !important;
     margin-right: 65px !important;
     margin-bottom: 1px !important;
     margin-left: 65px !important;
     }
}
    Thread Starter madhavadasa

    (@madhavadasa)

    I do want it to effect just mobile, however I added this @media code and then the contact form goes to the right side on mobile. Originally it’s to the left, with this code it shows all the way to the right.

    • This reply was modified 7 years, 4 months ago by madhavadasa.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to Center Contact Form7 On Mobile Screens’ is closed to new replies.