Solved

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

Posted on 2011-03-24
11
310 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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
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 add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

840 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