Jump to content


Photo
* - - - - 1 votes
Resolved

Reduce Margin In Contact Form

margin contact form

  • Please log in to reply
5 replies to this topic

#1 texasx

texasx

    Member

  • Members
  • 26 posts
  • LocationSweden
  • Framework Version:2.35
  • Country: Country Flag

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
  • FosyLemydem likes this

#2 mackenzie

mackenzie

    Advocate

  • Members
  • 333 posts
  • Country: Country Flag

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
  • LocationSweden
  • Framework Version:2.35
  • Country: Country Flag

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
  • 12988 posts
  • LocationManchester, UK
  • Country: Country Flag

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
  • LocationSweden
  • Framework Version:2.35
  • Country: Country Flag

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
  • 12988 posts
  • LocationManchester, UK
  • Country: Country Flag

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.





Also tagged with one or more of these keywords: Resolved, margin, contact form