Solved

CSS form field needs too wide in sidebar how do I style it?

Posted on 2011-03-24
11
314 Views
Last Modified: 2012-05-11
There is a contact form in the sidebar here:
http://www.burningtree.com

There is a form field that is the quiz. the width is too wide and the quiz quistion does not show up.
How can I stylye this element to show in the sidebar?

0
Comment
Question by:jbrashear72
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
11 Comments
 
LVL 3

Author Comment

by:jbrashear72
ID: 35208544
This is the code that gets generated from the Contact 7 form.

<span class="wpcf7-form-control-wrap quiz-947">
<span class="wpcf7-quiz-label">1+1=?</span>
&nbsp;
<input type="text" maxlength="5" size="5" class="wpcf7-quiz" name="quiz-947">
<input type="hidden" value="b52bd00e06a35a2aa8f86dbd292be819" name="_wpcf7_quiz_answer_quiz-947">
</span>
0
 
LVL 16

Expert Comment

by:JF0
ID: 35208857
Is this what you expect?
<div class="wpcf7-form-control-wrap quiz-947"><div class="wpcf7-quiz-label">1+1=?</div>&nbsp;<input type="text" name="quiz-947" class="wpcf7-quiz" size="5" maxlength="5" style="margin-left: -3px;"><input type="hidden" name="_wpcf7_quiz_answer_quiz-947" value="b52bd00e06a35a2aa8f86dbd292be819"></div>

Open in new window

0
 
LVL 3

Author Comment

by:jbrashear72
ID: 35209519
that code is auto generated I am not sure exactly . I expect to see the quiz to the left of the form.
and it show up in the sidebar.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 16

Expert Comment

by:JF0
ID: 35209580
add this style to your style sheet:

input.wpcf7-quiz { width:100px;}

and adjust accordingly.
0
 
LVL 3

Author Comment

by:jbrashear72
ID: 35210195
The span with the text doesnt show up.
0
 
LVL 16

Expert Comment

by:JF0
ID: 35210238
I do not see that you have added the style I mentioned.
0
 
LVL 3

Author Comment

by:jbrashear72
ID: 35215524
I added it to the end of stles.cee but it is getting ignored.
0
 
LVL 16

Expert Comment

by:JF0
ID: 35215653
I do not see it in any of your stylesheets; please point me in the right direction. This should be quite obvious, the solution I gave is correct.

Try adding it to this stylesheet:
http://www.burningtree.com/wp-content/themes/thematic/library/styles/default.css 
0
 
LVL 16

Accepted Solution

by:
JF0 earned 500 total points
ID: 35216193
Ok, I see you have done it now. One more thing (due to a bug in Firebug, ha).

Make it
input.wpcf7-quiz { width:100px !important;}
0
 
LVL 3

Author Comment

by:jbrashear72
ID: 35216231
OK I changed it to:
input.wpcf7-quiz { width:100px !important;}


For me to add it to the other File I would need to get FTP access. do you still want me to add it to Default?
0
 
LVL 16

Expert Comment

by:JF0
ID: 35216278
I'm sorry, this is really weird. In Firebug that change works but on the live site it does not. A simple margin-left should fix it. Adjust numbers to your needs.

input.wpcf7-quiz { width:100px !important; margin-left:10px;}
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to delete "dots" above Bootstrap 3 navbar 4 117
Responsive Font Size 6 61
CSS Flex space-between 2 29
CSS Scroll Center with Static Side. Like EE does. 2 45
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question