Contact Form 7 Formatting

Still haven’t figured this out yet. Any advice would be greatly appreciated.

-Thanks

Okay, I figured out the border around the email field issue. I added input[type=”email”] to the css. The alignment issue on a smaller screen is still an issue, albeit one I could live with. If anyone has a suggestion I’d be grateful.

Thanks

You need something to clear your floats for your two-columns. This will create the break you need between the two columns and the fields below.

And you should make your right column also float left. That way when the browser window (or device screen) is small enough, the right column will fall under the left column.

Hope this helps.

bemdesign,

That definitely helps, although I’m not a coder and I’m afraid that I don’t know how to implement your suggestions. If you have any advice on how I could learn to do this specific task or any suggestions based on my existing css (copied below), I would be very grateful.

-thanks

whaleheartproductions.com/contact

Begin CSS:

#two-column {
width: 100%;
}

#two-column #left {
width: 300px;
float: left;
}

#two-column #right {
width: 250px;
float: right;
}

#two-column p {
margin-bottom: 12px;
}

#two-column input[type=”text”], input[type=”email”] {
border: none;
border: 1px solid #000;
font-size: 14px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 100%;
padding: 5px;
}

#two-column #right input[type=”text”], #two-column #left input[type=”text”], input[type=”email”] {
width: 240px;
}

#two-column textarea {
position: relative;
padding: 5px;
border: 1px solid #000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 100%;
}

#two-column input[type=”submit”] {
padding: 8px 18px;
background: #222;
color: #fff;
border: 1px solid #fff;
float: right;
font-size: 14px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

#two-column input[type=”text”]:focus, #two-column textarea:focus {
background: #eee;
}

#two-column input[type=”submit”]:hover {
background: #fff;
color: #222;
border: 1px solid #222;
}

Right after your #right div add a <br /> tag and give it a class called “clear” or what not. In your css, give it the following style:

.clear{
clear: both;
}

Next change this:

#two-column #right {
width: 250px;
float: right;
}

to this:

#two-column #right {
width: 250px;
float: left;
}

Save and test.

Thanks again. Okay, I added the following to my cf7 html in the place you suggested:

<br class=clear>

Then I added

.clear{
clear: both;
}

to the CSS somewhere in the middle because I wasn’t sure where exactly to put it.

Next I replaced the final section of CSS as you suggested.

The right column now lines up on the left in a smaller window, but there are two other new issues. The word ‘Subject’ doesn’t stay attached to the subject field in a smaller window and on full screen (laptop size) the right column is now skinny line below the left column.

If I get get the word ‘Subject to follow the subject field and the two columns to line up horizontally on full screen then I’d be done.

Any thoughts? Thanks again.

Move the <br class="clear" /> to after the closing tag for the <div id="right"> and before the paragraph tags.

So it should look like this:

<div id="right">
...
</div>
<br class="clear" />

<p>...

Make sense?

YES! You’re the greatest! It worked. I can’t tell you how happy that makes me. That was the last little fix I was hoping to make.

Is there some way I can show my appreciation? A tip or something?

Thanks again, Gabe

How about tip the programmer behind Contact Form 7. ??
Oh and mark this thread resolved.

Will do. Thanks.