?
Solved

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

Posted on 2011-03-24
11
Medium Priority
?
319 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 2000 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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses

649 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