Responsive contactform7 styling with microthemer

Tagged: ,

Author Posts

leslie2013 July 19, 2013 at 2:56 pm

Notice: this information was written when Microthemer version 2 was current. On Dec 26th, 2014 version 3 was released with a completely new interface. Some of the information may be redundant, but as much of the functionality remains the same in version 3 we haven't deleted this post.

Hi

Just purchased this wonderful product… which will take some time to get used to for a noob like me 🙂

Hope someone can help me please… i have attempted to style contactForm7 in a two column type layout…. where some elements are on the left and some are on the right.

there is a div id here called left (which i styled via microthemer)
input boxes with their descriptions
close of div

there is a div id here called right (which is styled via microthemer)
input boxes with their descriptions
close of div

lol didn’t realise that the code wouldn’t post!

my problem is that all the actual input boxes do not re-adjust for mobiles 🙁

Is there a way to make my stylesheet responsive using microtheme? does microtheme have a html editor also?

this is what i’d like to achieve…. using this method
http://www.hongkiat.com/blog/creating-responsive-form-with-css3-html5/

leslie2013 July 19, 2013 at 3:07 pm

oh i found the css file to view the styles i’ve applied to the contactform7 however i am unable to hardcode it… i wanted to add this…

@media screen and (max-width: 800px) {
and here i would add the bits i need.

is there any way of doing this?

Sebastian July 19, 2013 at 3:17 pm

Hi there,

Yes I was just about to say you’ll need to use media queries if you want your form to adapt to different screen sizes. You can currently enter custom CSS via the option accessible by hovering over the settings icon at the very bottom of Microthemer’s visual view interface. It’s the icon with the {} braces.

You can also enter raw CSS in the Selector CSS textarea. This is normally just used for entering a CSS selector. e.g. “#header”. But a customer asked for a way to add custom CSS to selectors so you can now enter this “#header { color:red; } and Microthemer will write “color:red;” to the stylesheet (in the #header selector). However, for your media queries, I would recommend sticking to the first option I mentioned.

Thanks

ps the next major feature planned for Microthemer will be an easy way to design responsively.

Abland July 20, 2013 at 7:12 pm

Hi, leslie2013,

You could try these rules within your media queries to make the one box drop below the other:

#left, #right {
display: inline;
float: left;
width: 100%;
clear: right;
}

In my practice I use Artisteer primarily and include responsive capabilities on export so it adds the class “responsive” automatically, so media queries already exist and my styles rules just need the class added:

.responsive #left, .responsive #right {
display: inline;
float: left;
width: 100%;
clear: right;
}

If your theme or theme engine include responsive then you can also include the class they generate as new Microthemer selectors, or in the custom rules area.

Also, for contact form 7 I see it recommended to add the following into your media query or responsive class:

.wpcf7-form-control {
width: 100%;
}
.wpcf7-submit {
width: 50%;
}

This is so your form itself scales to the space better.


@Sebastian – the double click to create selectors just keeps getting better and better the more I use it 🙂

Sebastian July 21, 2013 at 1:25 pm

Thanks for pitching in Abland! I hope that’s of use to you leslie2013.

I’m glad you’re getting on well with the double-click feature too Abland. Let me know if you can think of any ways of improving it. I had a thought the other day that it might be useful if Microthemer could suggest a value in the Selector Label field too. This would be a configurable option on the preferences page (not on by default) as it would only appeal to Devs.

The idea would be that Microthemer builds a human readable label from the CSS selector code e.g. “#header a” would be “Header Link” (or “Header a). It’s only a thought at this stage, but I if I could implement it well it would be a really handy time-saving feature.

You must login or register to reply to this topic.