- This topic is empty.
-
AuthorPosts
-
January 19, 2013 at 1:47 pm #42109
StigBratvold
ParticipantHi guys.
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:
http://www.spetakkel.org/kontakt/Does any one know how I can fix this?
January 19, 2013 at 8:06 pm #121533uneart
MemberI would try to give the li-tag a overflow: hidden; that should keep it in place.
January 19, 2013 at 9:04 pm #121537jurotek
Participant@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 19, 2013 at 10:14 pm #121543TreeRoot
ParticipantTry applying box-sizing (use border-box) to your inputs, then play with the widths (trying 100% instead of 90%):
input, select, textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}January 20, 2013 at 4:02 pm #121617StigBratvold
Participant@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:04 pm #121618StigBratvold
Participant@jurotek I found some tutorials online on how to do it so I added some html to the Contact Form 7 plugin through the wordpress dashboard and then I added the css to the custom.css in the dashboard..
January 20, 2013 at 4:19 pm #121620StigBratvold
Participant@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 20, 2013 at 6:26 pm #121639uneart
MemberOh yes the text will not break into lines with overflow:hidden;. But is that really that bad?
January 21, 2013 at 3:58 am #121696StigBratvold
Participant@uneart Yeah I think it would be a problem both visually and practically if the text falls out of the screen.
@TreeRoot @jurotek I tried adding the box-shadow and then using % for the width but when I use 100% it only covers half the space. You can see it now: http://www.spetakkel.org/kontakt/January 21, 2013 at 8:23 am #121732jurotek
Participant@StigBratvold, making progress, now try max width instead 100%
January 28, 2013 at 7:03 am #122545StigBratvold
ParticipantI realized the theme I was using had its own contact form that was responsive but thanks for the help everyone :)
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.