Contact Form fields not responsive

  • rr2017

    (@rr2017)


    7 years, 8 months ago

    I looked through the forum but any fixes that were given did not work for my contact form. The contact form looks great on a desktop but on a mobile, the fields are squished over to the left side and are so tiny that it doesn’t say which fields are which.

    When you do try to type in them, it shows that it’s typing but the letters don’t show up.

    I currently have this code added to additional CSS:
    @media (max-width: 767px) {
    .wpcf7-form.cf7-style {
    width: 100%!important;
    }
    }
    I have tried to do padding with percentages and adding !important after them but they made no difference.

    Anything else that will help? Thanks.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    7 years, 8 months ago

    Try switching theme to the default one (Twenty Seventeen).

    Neil Murray

    (@buzztone)

    7 years, 8 months ago

    The problem is due to a lack of mobile responsive CSS styling in your WP theme. There is solid CSS there for desktop but nothing for mobile.

    Your sample CSS indicates you may not currently have sufficient CSS skills to tackle this issue – the CSS your theme uses for CF7 forms is quite complex.

    Rather, if possible, I suggest you contact your theme provider about the lack of mobile responsive CSS styling.

    It’s unprofessional & also relatively uncommon for themes to provide CSS styling for CF7 forms on desktop, but nothing for mobile.

    Thread Starter rr2017

    (@rr2017)

    7 years, 8 months ago

    Thank you, Neil. I have contacted the theme provider.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Contact Form fields not responsive’ is closed to new replies.