Return to Snippet

Revision: 71079
at January 7, 2017 03:12 by deliciousthemes


Initial Code
************CF7 markup***************

<div class="one-half">
<label> Your Name (required)
     </label>
</div>
 
<div class="one-half last">
<label> Your Email (required)
    [email* your-email] </label>
</div>
 
<label> Your Message
    [textarea your-message] </label>
 
[submit "Send"]




************CSS***************

.one-half,
.one-third {
    position: relative;
    margin-right: 4%;
    float: left;
        margin-bottom: 20px;
 
}
 
.one-half { width: 48%; }
.one-third { width: 30.66%; }
 
.last {
    margin-right: 0 !important;
    clear: right;
}
 
@media only screen and (max-width: 767px) {
    .one-half, .one-third {
        width: 100%;
        margin-right: 0;
    }
}

Initial URL
https://deliciousthemes.com/contact-form-7-fields-columns/

Initial Description
Displaying Contact Form 7 fields on 2 columns using CSS.

Initial Title
Contact Form 7 Fields on 2 Columns

Initial Tags
form, wordpress

Initial Language
HTML