Responsiveness

  • I’ve created a CF7 form for a responsive website and the text fields look fine but the two dropdown menus become very wide in some viewport window sizes. I guess they aren’t covered by my CSS so would be grateful for a steer on how to include them. Thank you. Here’s my CSS:

    #wpcf7-f715-p19-o1 .wpcf7-form input[type="email"] {
background: #ffffff;
width: 50%;
}
#wpcf7-f715-p19-o1 .wpcf7-form input[type="text"], input[type="tel"]
{
background:  #ffffff;
width: 50%;
}
#wpcf7-f715-p19-o1 .wpcf7-form textarea[name="your-message"] {
background: #ffffff;
width: 50%;
}
#wpcf7-f715-p19-o1 .wpcf7-form input[type="submit"] {
background: #8f48e2;
}

    https://www.ads-software.com/plugins/contact-form-7/

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

  • Solution should be really easy for you to find using Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail. Once you understand how the HTML and CSS is configured in your CF7 form, you should be able to see the CSS changes you need to change the appearance of the form to suit your requirements.

    Problem is following CSS in https://www.beautyandsoul.net/wp-content/themes/customizr/inc/css/grey.min.css

    select {
    width: 100%;
}

    ??

    Thread Starter chappie

    (@chappie)

    Yes, on a better day I could find the answer but today my development laptop with latest versions of browsers and tools installed has gone to PC heaven with logic board failure so I am reduced to an old iMac running an old Os and 3-year old versions of browsers which don’t give me the tools I had on the other machine. So I was hoping someone might kindly give me the CSS selectors for those two dropdown form fields so that I can finish this job off!

    If not, no worries : new laptop should be here in a couple of days.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Responsiveness’ is closed to new replies.

Tags