WordPress.org

Forums

Contact Form 7
Responsiveness (3 posts)

  1. chappie
    Member
    Posted 1 year ago #

    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://wordpress.org/plugins/contact-form-7/

  2. buzztone
    Member
    Posted 1 year ago #

    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 http://www.beautyandsoul.net/wp-content/themes/customizr/inc/css/grey.min.css

    select {
        width: 100%;
    }
    ​​

  3. chappie
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Contact Form 7
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic