0

The contact form on my site is not being responsive.

This is what is I have tried to make it responsive. But, its not working.

@media only screen and (min-width : 767px) {
               .wpcf7-email,
               .wpcf7-text,.wpcf7-tel, .wpcf7-form-control.wpcf7-select,.wpcf7-form option, .wpcf7-form-control.wpcf7-textarea {
                 max-width: 100%;
                 padding: 10px 1px !important;
                background:#c42a91;
                color:#fff;
               }
                .slotholder{
               width: 100%
               position: relative;}  

                    .project_inner{
                  color: #fff;
                  }

                  .cmsms_project_header.entry-header > h4 > a{
                  color: #fff;
                  }

    }

Please help me out.

This is my site http://mylittlewhitelies.com/ The contact form is on the bottom.

password: MediaCentralPassword

8
  • When I look at your website it seems responsive. Can you explain more what type of behaviour you expect that isn't happening right now?
    – Andre
    Nov 3, 2015 at 12:39
  • @Andre Thanks for replying. Well, I want the contact form to be responsive, the slider as well.
    – Nauman
    Nov 3, 2015 at 12:41
  • The site seems responsive but the form isn't. Are you sure the input fields have no fixed width and the classes are the right names? Nov 3, 2015 at 12:44
  • The idtwo-column has a fixed with of 600px Nov 3, 2015 at 12:47
  • @Interactive that seems to be it. Can you create an answer for two-column with a width of 100% instead of 600px?
    – Andre
    Nov 3, 2015 at 12:48

1 Answer 1

0

Add

#two-column {
    width: 100% !important;
}

To your css, outside of the @media tag. I suggest doing it on the bottom of your css file to be sure nothing overwrites it.

8
  • inside @media tag ?
    – Nauman
    Nov 3, 2015 at 13:03
  • @NaumanTanwir see my updated answer :)
    – Andre
    Nov 3, 2015 at 13:04
  • dropbox.com/s/3mm1cvbdmekwb61/… This is what I am getting right now
    – Nauman
    Nov 3, 2015 at 13:10
  • Yes, you have to do some additional changes that pads the input fields to the right, but it is responsive now. You can also change @media only screen to @media all.
    – Andre
    Nov 3, 2015 at 13:11
  • This is because the width of your fields are to big. I saw a size="40" in one of them. Take a look at that. Everything should be scalable... Nov 3, 2015 at 13:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.