Solved

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

Posted on 2011-03-24
11
307 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
  • 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
 
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

759 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now