Contact Form 7 Field color and position

Tagged: , ,

Author Posts

Maskell April 15, 2013 at 12:53 am

Heads up! this post was created when Microthemer was at version 1. The current version is 7. Some references to the interface may be out of date.

When I set up my Contact Form 7 fields everything looks fine. When I apply Microloader and the form theme, one field inherits the background color from the theme, and moves out of alignment. All other form fields are white. Why would this happen. I checked to form filed code and don’t see anythinh out of place.
http://maceythemakeupartist.com/contact/

Sebastian April 15, 2013 at 12:41 pm

Hi there,

I’ve updated the Plugin Pack to accommodate inputs with type=”email” now. If you delete the current “cf7 white beauty” and download and install this new one here it should work:

https://themeover.com/cf7-white-beauty/

Cheers,

Sebastian

leslie2013 July 22, 2013 at 9:28 am

Thank-you… well i’ve managed to get the form the way i like… still unable to get it to be responsive. I did hcode the css where Sebastian said… but maybe i’m doing it wrong 🙁 i’m liking the feel of the whole microthemer… i guess i’m still trying to work out wordpress files… its all quite new to me.

this is what i added in


@media screen and (max-width: 380px) {
#contact_form {
padding:0px !important;
width:100%;

}
}

but when i check in firefox…. it still not reducing?

here is the development site… http://www.fabcakes.com.au/dev/contact-us-2/

oh the colours are there so i can see what i’m doing lol

Sebastian July 22, 2013 at 10:12 am

Hi there,

This looks like a specificity issue. In your media query you’ve got:
#contact_form
as the selector. And:
width:100%;
as the style rule. This is being trumped by the code Microthemer is auto-generating.

The selector Microthemer is using is more specific.
div#contact_form
And the style rule has !important status:
width: 860px !important;

By default Microthemer automatically adds !important to every style rule, to reduce the odds of new users bumping up against CSS specificity issues. But if you’re making use of the hand-coding feature it might be a bit tedious to add !important all the time, so I would recommend turning this option off via Microthemer’s preferences page.

You will also need to adjust your custom CSS selector so that it is more specific than:
div#contact_form
You could try:
body div#contact_form

I hope that’s helpful!

Sebastian

You must login or register to reply to this topic.