CODEWITHSUNDEEP
phphtmlcsswordpresswordpress-theming
railwaysss
railwaysss

Reputation: 3

WordPress issue with inputs inside divs on ContactForm7

So this is my first time using StackOverFlow and I looked for a solution for this problem everywhere, but none of them were helpful.

I am currently editing a page on a WordPress blog that has a form. So, to make it easier to handle, I separated the fields in 2 divs. Inside the divs, I have the inputs, but they are not aligned properly. I tried floating, using vertical align, etc etc and nothing worked.

link (I was not allowed to upload an image because of no reputation, sorry about this and for having no fiddle)

Here is the code of the divs: 

<div class="ftdiv">
<div class="mvto">
<p><strong>Moving From</p></strong>
<hr>
<p>Address [text text-315]</p> 
<p>City [text text-315]</p>
<p>Postal Code [text text-315]</p>
<p>Apt. # [text text-315]</p>
<p>Province [text text-315]</p>
</div>

<div class="mvfrom">
<p><strong>Moving To</p></strong>
<hr>
<p>Address [text text-315]</p>
<p>City [text text-315]</p>
<p>Postal Code [text text-315]</p>
<p>Apt. # [text text-315]</p>
<p>Province [text text-315]</p>
</div>
</div>

And the CSS 

.ftdiv {
    width: 100%;
}

.mvto {
    float: left;
    width: 50%;
}

.mvfrom {
    float: right;
    width: 50%;
}


#wpcf7-f289-p154-o1 input {
    width: 120px;
    height: 11px;
    border-radius: 0;
    margin-left: 25px;
}

.smaller {
    font-size: 9px;
    font-style: italic;
}

#dropyear {
    margin-right: 10px;
}

Please, if someone can help me, I'd be very grateful!

Upvotes: 0

Views: 31

Answers (1)

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

For best practice create a <label> to text:

CSS

.ftdiv {
    width: 100%;
}

.mvto {
    float: left;
    width: 50%;
}

.mvfrom {
    float: right;
    width: 50%;
}


#wpcf7-f289-p154-o1 input {
    width: 120px;
    height: 11px;
    border-radius: 0;
    margin-left: 25px;
}

.smaller {
    font-size: 9px;
    font-style: italic;
}

#dropyear {
    margin-right: 10px;
}

label{
    display:inline-block;
    width: 150px; // Adjust your needs
    text-align: left;
}

HTML

<div class="ftdiv">
<div class="mvto">
<p><strong>Moving From</p></strong>
<hr>
<p><label>Address</label> [text text-315]</p> 
<p><label>City</label> [text text-315]</p>
<p><label>Postal Code</label> [text text-315]</p>
<p><label>Apt.</label> # [text text-315]</p>
<p><label>Province</label> [text text-315]</p>
</div>

<div class="mvfrom">
<p><strong>Moving To</p></strong>
<hr>
<p><label>Address</label> [text text-315]</p>
<p><label>City</label> [text text-315]</p>
<p><label>Postal</label> Code [text text-315]</p>
<p><label>Apt.</label> # [text text-315]</p>
<p><label>Province</label> [text text-315]</p>
</div>
</div>

DEMO HERE

Upvotes: 1

Related Questions