Jump to content


Photo
* - - - - 1 votes
Resolved

Reduce Margin In Contact Form

margin contact form

This topic has been archived. This means that you cannot reply to this topic.
5 replies to this topic

#1 texasx

texasx

    Member

  • Members
  • 26 posts

Posted 27 November 2012 - 10:26 PM

Hi,
Struggeling to find the right custom css to reduce margin between the rows / span from 22 down t 2px. Tried many versions. Here is one of many trials which do not work:

#page.wpcf7-form .post {
margin-top: 2px;
margin-bottom: 2px;
}
-------------------------

This what firebug css code says (margin adjusted in firebug) :






element.style {


margin-bottom: 2px;
margin-top: 2px;
}


p:before {


content: "";
display: block;
overflow: hidden;
width: 8em;
}


p {


margin: 1.6em 0;
orphans: 4;

--------
html
<div id="wpcf7-f729-p100-o1" class="wpcf7">



<form class="wpcf7-form" method="post" action="/#wpcf7-f729-p100-o1">



<div style="display: none;">


<input type="hidden" value="729" name="_wpcf7">

<input type="hidden" value="3.3.1" name="_wpcf7_version">

<input type="hidden" value="wpcf7-f729-p100-o1" name="_wpcf7_unit_tag">

I would really appreciate any help.
Thanks

#2 mackenzie

mackenzie

    Advocate

  • Members
  • 333 posts

Posted 28 November 2012 - 02:32 AM

If possible please post which site (full url) we should look at for troubleshooting. Many thanks!

#3 texasx

texasx

    Member

  • Members
  • 26 posts

Posted 28 November 2012 - 07:14 AM

Hi,
It's the home page:

Please Login or Register to see this Hidden Content


The contact form at bottom
Thanks

#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 17625 posts

Posted 28 November 2012 - 07:21 AM

Hi,

Not sure if I understand what you're trying to do but add the code below to your custom CSS:


Please Login or Register to see this Hidden Content



#5 texasx

texasx

    Member

  • Members
  • 26 posts

Posted 28 November 2012 - 07:31 AM

Thanks,
This made it. (Reduced the margin between fields)
I´ve tried a similair one but with a dot in front of the p (.p)
Is there any rules or a short list of how to translate the firebug view into CSS?
I'm looking forward to the day when I know how create working code.
Many thanks for this ... and perhaps some more tips about learning css coding.

#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 17625 posts

Posted 28 November 2012 - 08:30 AM

For assistance with CSS, use this link -

Please Login or Register to see this Hidden Content


For help with understanding FireBug, read the documentation -

Please Login or Register to see this Hidden Content



I also found this which may help you!

Please Login or Register to see this Hidden Content




The topic was marked as resolved.