Making a form responsive
# January 19, 2013 at 1:47 pm
I have been customizing the look of the plugin Custom Form 7 to fit in with the design of the site.
It looks great on a computer screen but on an iPhone the form tables goes out of the view. I have been trying to put in percentages instead of pixels but it doesn’t really work properly. When I put in 90% width is just covers about half the space on the computer screen.
Here is the page I am talking about:
Does any one know how I can fix this?# January 19, 2013 at 9:04 pm
@StigBratvold, I have no knowledge of wordpress, but I noticed that your form input box classes have a set width of 509px and do not scale with left content, here’s the first input of class wpcf7-form-control blah blah blah . . . , you might have to set the width to either % or give it max width. Also I noticed that in media query you set content to implicit width instead just let it re-size to viewport width on it’s own if you give content max width which in your case I believe it’s 640px.# January 20, 2013 at 4:02 pm
@jurotek The actual page itself is a premium wordpress theme I bought so I am not so much familiar on how I can change the media query inputs and stuff.. I have noticed that the theme is having problems with its responsibility but this is to heavy for me to manage to fix by myself as I am still a rookie.
@uneart I tried adding that to the li-tag but nothing happened.. It is still the same :(# January 20, 2013 at 4:19 pm
@uneart I tried it again and it works perfectly visually at first. The problem is when I start typing the text is does not break in to lines(on an iPhone). The text just continues on one line and hiddes the earlier stuff I wrote when it falls out of the screen…# January 21, 2013 at 3:58 am
@uneart Yeah I think it would be a problem both visually and practically if the text falls out of the screen.# January 30, 2013 at 12:56 am
This reply has been reported for inappropriate content.
Did anyone look at this more in depth? I thought to mess with it just to know how in the future I would make CF7 reactive. I found that using media queries to wrap the contact form in a class and limiting the max-width of the inputs and textareas worked perfectly. Were there any better ways to do it?
You must be logged in to reply to this topic.