0

I have a wordpress site and I'm using a contact form on this particular page. Each input field has a heading, such as "Name", "Email", etc. It looks great on any desktop browser. But when viewing it from a iphone, the text goes too far and doesn't line up with it's input box. So I tried the following:

.page-id-1656 .entry-content-p {
 width:40% !important;
}

And that works for the text, but the problem is that shrinks all my other fields. So the input boxes are no longer the size I want them. Is there a way to target only the text?

If this helps, here is the CSS for the input fields:

.page-id-1656 .wpcf7-textarea {
   width:40% !important;
   height:100px !important;
   font-size:15px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
   border-radius: 5px 5px 5px 5px;
   border-color:#adadad !important;
   outline:none !important;
}

Or is there a way to use what I tried but make it block out .wpcf7-textarea

EDIT: View source gave me this as the class: wpcf7-form-control wpcf7-text

EDIT 2: Font scaling based on width of container appears to be the answer I'm looking for. I'm leaving the question up as it may be helpful to others. The answer was changing font-size to 1vw instead of 15px. Changing the unit to vw allowed the font to adjust based on the device using it.

Community
  • 1
  • 1
BlueRiver89
  • 77
  • 1
  • 10

1 Answers1

1

Well, you could sharpen up the CSS styling a bit. I suppose there is some sort of a h1/h2/h3 tag or so in the headings for your form? Something that wraps only the text in the form?

Just use this to make your CSS-styling more accurate:

.page-id-1656 .entry-content-p > h3 {
   width: 40% !important;
}

Or switch what ever is the case in the h3, but the point here is to specify direct pointers to your CSS-styling. It's hard to say from this point of view what the HTML code looks like in the form and provide you a working piece of code, but you should get pretty far with this.

Edit: Try this

.wpcf7 > form > p:first-child {
   width: 40% !important;
}

It seems to be a common structure of CF7.

Pepelius
  • 1,576
  • 20
  • 34
  • It's because it's using contact form 7, I don't have the html. – BlueRiver89 Jul 23 '14 at 04:49
  • 1
    Could you right click some part of the form and view it with **inspector**? From there you can check the code and provide us some more detailed intel. – Pepelius Jul 23 '14 at 04:51
  • I found this in view source, class=wpcf7-form-control wpcf7-text – BlueRiver89 Jul 23 '14 at 04:51
  • Contact form 7 controls the text and the field. Iphone isn't reading the css for the text part properly. The desktop browsers are. – BlueRiver89 Jul 23 '14 at 05:10
  • I found some sort of a demo of CF7, after a while looking at it, seems like it's a quite simple structure, which may cause some problems here. But try to change the CSS-styling to what I edited on my answer. – Pepelius Jul 23 '14 at 05:24
  • I voted your answer up for the effort you put in, and that it is likely helpful to others, which I appreciate. I found the answer I was looking for. My issue was displaying the font on an iphone, or any mobile device. I never knew about "vw" as font-size units. But when I set the font-size to 1vw !important, it retained the desktop browser font size I wanted and at the same time corrected the mobile browser issue. – BlueRiver89 Jul 23 '14 at 05:34
  • Even I didn't know that, but glad you could figure it out by yourself! Appreciate the upvote! – Pepelius Jul 23 '14 at 05:47