Margin or Padding Buttons on Responsive

  • Resolved MailerDaemon

    (@mailerdaemon)


    10 years, 1 month ago

    Good morrow,

    My site’s contact form is using the most recent CF7 version on WP4.1. I am using the Twenty Fifteen theme.

    I have two forms on the site and both are looking and working great on a standard desktop browser and tablet. The side-bar form works great on a mobile browser. I am having trouble with the primary form on a mobile browser, or when the desktop browser shrinks to mobile size (it’s easier to test and duplicates the problem).

    The main form has a submit and clear button labeled ‘Send Your Message’ and ‘Clear This Form’. Because they are too wide, the buttons wrap on the mobile size. This is perfectly fine but there appears to be no padding or margin between the two of them.

    I’ve tried reading through the Style Guide linked from the CF7 page, and some other suggestions like <style> input[type="button names"] Add stuff here </style> in the top of the form itself but neither of them have worked. The latter actually caused a lot of other elements to move around, even with just a few pixels of padding or margin space.

    A search of the CF7 support here brought up a few similar items but nothing quite like I’m experiencing. Am I totally missing something or just not following directions/suggestions correctly?

    Thank you!

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

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

  • See Styling Contact Form for a general explanation of styling CF7 forms using CSS.

    There is a link at the bottom of the page to a comprehensive and detailed article on Styling Contact Form 7 Forms. The article shows people, with suitable HTML & CSS skills, how to change the appearance of their Contact Form 7 Forms to meet their particular requirements.

    Thread Starter MailerDaemon

    (@mailerdaemon)

    I did go through that article linked from the site. I was able to get some good info and tried some of the things the writer mentions but none of them worked for me.

    I am not sure if there is specific CSS that’s required or not that I’m missing.

    Use 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.

    Really like the look of your form – nice use of CF7.

    Thread Starter MailerDaemon

    (@mailerdaemon)

    Good morrow,

    Thank you, buzztone! I spent some time last night reading through your guide and the CF7 site. I will be working on the issue this weekend and hope to have it resolved with that info.

    I appreciate the help.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Margin or Padding Buttons on Responsive’ is closed to new replies.