Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Posted by farhanasalman
.a{fill-rule:evenodd;}techdegree
farhanasalman
Front End Web Development Techdegree Student 2,830 Points

Contact form 7 in wordpress problem

I have a little problem for designing contact form 7

The form title and background on the right side of this website I like the one http://www.gregmonforton.com/

Here is my css code:

.form-title {
  background: url("http://www.website.com/wp-content/uploads/2014/12/form-title-background.jpg") repeat  scroll center top transparent;
  color: #FFFFFF;
  font-family: 'Calibri', Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
  padding: 15px 25px 5px;
  position: relative;
  text-shadow: 1px 1px 2px #000000;
  z-index: 2;
}

.free-banner {
  background: url("http://www.website.com/wp-content/uploads/2014/12/free-banner.png") no-repeat scroll right top transparent;
  height: 150px;
  position: absolute;
  right: -11px;
  text-indent: -999em;
  top: -4px;
  width: 150px;
}

And in contact form html code:

<div class="form-title">
   <div class="free-banner"></div>
          <h3>FREE Case Evaluation</h3>     
              <p>No Cost To You. No Obligation. Contact Us Today</p>      
</div>

And my output form:

http://screencast.com/t/0ZucjbiwPiN

The form title is too wide than other form field and button.

I need is that the form title should be equal to form field and button.

What is wrong with my css or html code?

1 Answer

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

This is tough to troubleshoot without a live demo to test in the browser, but some suggestions:

  • Check all your CSS widths are correct
  • Check that the images you're using are the right size.