Solved

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

Posted on 2011-03-24
11
312 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
Technology Partners: 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone 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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
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 …
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…

763 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