In my previous article I have wrote about creating a two column form in Contact form 7. Now in this tutorial we will see on how to create a responsive two column form. The form will be in two columns in bigger screens and will become one column in mobile devices. Our final form will look like the following.
HTML Markup
Let’s create the HTML markup for the form first. We will wrap the whole form with an ID named “responsive-form” and then will have rows and columns like the following.
<div id="responsive-form" class="clearfix"> <div class="form-row"> <div class="column-half">First Name [text* first-name]</div> <div class="column-half">Last Name [text* last-name]</div> </div> <div class="form-row"> <div class="column-half">Email [email* your-email]</div> <div class="column-half">Phone [text* your-phone]</div> </div> <div class="form-row"> <div class="column-full">Subject [text* your-subject]</div> </div> <div class="form-row"> <div class="column-full">Your message [textarea your-message]</div> </div> <div class="form-row"> <div class="column-full">[submit "Send"]</div> </div> </div><!--end responsive-form-->
If you publish the form right now, it will look similar to the following.
CSS Styles
Let’s look at the css styles for our two column grid.
#responsive-form{ max-width:600px /*-- change this to get your desired form width --*/; margin:0 auto; width:100%; } .form-row{ width: 100%; } .column-half, .column-full{ float: left; position: relative; padding: 0.65rem; width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } .clearfix:after { content: ""; display: table; clear: both; } /**---------------- Media query ----------------**/ @media only screen and (min-width: 48em) { .column-half{ width: 50%; } }
These styles define rows and columns. if you look at your form right now, you will see the form is already in two columns.
Let’s style the form now..
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 3px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } .wpcf7 input[type="text"]:focus{ background: #fff; } .wpcf7-submit{ float: right; background: #CA0002; color: #fff; text-transform: uppercase; border: none; padding: 8px 20px; cursor: pointer; } .wpcf7-submit:hover{ background: #ff0000; } span.wpcf7-not-valid-tip{ text-shadow: none; font-size: 12px; color: #fff; background: #ff0000; padding: 5px; } div.wpcf7-validation-errors { text-shadow: none; border: transparent; background: #f9cd00; padding: 5px; color: #9C6533; text-align: center; margin: 0; font-size: 12px; } div.wpcf7-mail-sent-ok{ text-align: center; text-shadow: none; padding: 5px; font-size: 12px; background: #59a80f; border-color: #59a80f; color: #fff; margin: 0; }
with these styles applied the form will look lot nicer. In desktop it will be displayed in two columns and in a mobile device it will be displayed in one column.
in desktop
in mobile
If you have any questions, please let me know on the comments.
Paul
where should i write the css code? i don’t see a window for that.
bage
In the theme css file (style.css).
Steve
How can I copy and past the above style sheet into my wordpress site to allow me to start working with it? Thanks!
bage
Just copy and paste it to your theme stylesheet.
bilal
how do i make this centered? its currently on the left. also how do i put the tags within the text box, so when i click inside the tag disappears?
bilal
nevermind i found out about the tags.
BUT how do i center the whole form including the button?
bage
With little bit of css you can do that. using “
margin-left:auto, margin-right:auto
” will center any div to the parent div. (Like the css definition I have used in #responsive-form )Matthew
Hello, the HTML bit dose it go in the form field? or what? i understand the css bit just no the HTML bit (yes im backwards)
bage
Yes, the whole HTML goes on the form editor.
bilal
It doesn’t seem to work, here is my Custom CSS, what could be the problem?
#logo {
float: none;
text-align: center;
}
.main-nav { display:none; }
.call-to-action { display:none; }
#featured-image {
display: right;
}
body {
background: none repeat scroll 0 0 #fff;
color: #555555;
font-family: Arial,Helvetica,sans-serif;
font-size: 14px;
line-height: 1.5em;
text-rendering: optimizelegibility;
}
#featured p {
font-size: 0;
line-height: 0;
padding: 0;
text-align: center;
}
.powered {
display:none;
}
#wrapper,
#featured,
.widget-wrapper {
background-color: transparent;
border: none;
}
.scroll-top {
display: none;
}
#responsive-form{
max-width:600px /*– change this to get your desired form width –*/;
margin:0 auto;
width:100%;
}
.form-row{
width: 100%;
}
.column-half, .column-full{
float: left;
position: relative;
padding: 0.65rem;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.clearfix:after {
content: “”;
display: table;
clear: both;
}
/**—————- Media query —————-**/
@media only screen and (min-width: 48em) {
.column-half{
width: 50%;
}
}
.wpcf7 input[type=”text”], .wpcf7 input[type=”email”], .wpcf7 textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.wpcf7 input[type=”text”]:focus{
background: #fff;
}
.wpcf7-submit{
float: center;
background: #b2c195;
color: #b2c195;
text-transform: uppercase;
border: none;
padding: 8px 20px;
cursor: pointer;
}
.wpcf7-submit:hover{
background: #b2c195;
}
span.wpcf7-not-valid-tip{
text-shadow: none;
font-size: 12px;
color: #ff0000;
background: #fff;
padding: 5px;
}
div.wpcf7-validation-errors {
text-shadow: none;
border: transparent;
background: #fff;
padding: 5px;
color: #9C6533;
text-align: center;
margin: 0;
font-size: 12px;
}
div.wpcf7-mail-sent-ok{
text-align: center;
text-shadow: none;
padding: 5px;
font-size: 12px;
background: #59a80f;
border-color: #59a80f;
color: #fff;
margin: 0;
}
img {
border: 0 none;
height: auto;
max-width: 100%;
vertical-align: middle;
margin: 0 228px ;
}
.copyright {
margin: 0 -153px;
}
.widget-wrapper select, .widget-wrapper input[type=”text”], .widget-wrapper input[type=”password”], .widget-wrapper input[type=”email”] {
width: 240px;
}
area:focus, input:focus, textarea:focus {
background: none repeat scroll 0 0 #eee;
}
select, input[type=”text”], input[type=”password”], input[type=”email”] {
border: 1px solid #555555;
border-radius: 5px;
font-size: 14px;
padding: 5px;
}
element.style {
display: none;
}
div.wpcf7-validation-errors {
border: medium none;
}
img {
border: 0 none;
height: auto;
margin: 0px 1px;
max-width: 100%;
vertical-align: middle;
}
bage
If you provide me with the link of you form, i will be able to check.
bilal
How do I make a 3 column form?
bage
Define a css class like .column-one-third{width:33%; float:left} and can use that like i used the .column-half
bilal
could you show an example of a 3 column in your current 2 column form? Just change of the half to one-third. kind of confused, i need to actually see the css/form code im really a noob. Thanks
Danick Labrie
Hello,
Thx for the tuto 🙂
1- Is there a way for the txt era in two columns to be 100%…because it seems to be only 50% (width) ? I dont know where to change it in the css.. i see only one 50% but it doesnt work while 100%.
2- Is it possible to give the code for 3 fonctionnal columns (responsively).
Thanks!
Tyler
Hey man,
Great tutorial. But I can’t seem to get it to work.
I’ve created the form and put the CSS into my child theme style.css folder.
Could you venture to the site and take a look real quick?
Much thanks.
bage
You haven’t provide me a link to check 🙂
ninoa
How can I get the submit buttom bigger?
bage
You can easily do that by increasing the padding in
.wpcf7-submit
Lorenzo
Hi,
I’ve implement the code as it is but somethings don’t work, for instance I can’t change the submit botton’s color in:
.wpcf7-submit{
float: right;
background: #326534;
color: #326534;
text-transform: uppercase;
border: none;
padding: 8px 20px;
cursor: pointer;
}
I’ve needed to add this code in CSS:
input[type=”submit”], .button {
background: none repeat scroll 0 0 #326534;
}
Another thing is the space between lines is not shown like in the example.
Thanks in advance for your comments.
Marie-Philippe
Hi! My forms are not equals. Those that are full does not have the same length than those with the class column-half.
I’m not so sure that the second part of CSS works. Do I need to copy that bit on the style.css too?
Thanks!
bage
Yes, you have to have all the css.
Zack
Hey Bage,
Great tutorial. I have a question I was hoping you could help with, as I have been banging my head against a wall all day trying to figure out the issue i’m having.
I have created a contact form similar to the one in this tutorial using the code you provided but adding some different fields. One of the fields I added was a dropdown menu.
When I added this dropdown it seems to push a blank into the next line, shifting the that is supposed to be on the left to the right and the thats supposed to line up with it on the left down to the next line.
This is what it’s supposed to look like
–textField– –dropDown–
–textField– –textField–
but it looks like this:
–textField– –dropDown–
–textField–
–textField–
I had originally tried to do a simple side by side arrangement again using tags and I was having similar issues there as well. Is there a known issue that using a dropdown causes with float or .
I can seem to figure this out.
Please help.
Thanks
bage
if you wrap the select element within the column, it will work properly. Do you have a link for me to check?
Zack
Hey Bage,
Great article. I have a question I was hoping you could help me with.
I have created a similar contact form to the one you demonstrate here but using different fields and field types. I seem to have an issue when adding in a dropdown menu where the on the next line is shifted to the right. It looks like a blank is being inserted. This causes the row below to shift right and the on the right of the next row to shift down.
Do you know if there is an issue with dropdown menus and float or why putting a text field adjacent to a dropdown would cause this formatting error?
I have tried to put a textfield next to a dropdown menu several different ways and it always seems to mess up the formatting. I haven’t been able to solve this all day.
Please help.
Thanks
bage
If you provide me a link to your form, I would be able to check.
zack
https://www.piecesforlife.com/products-services/consulting/
there are several forms that have the same elements. Here is one of them
Timo
Hey bage,
thanks a lot for your tutorial.
My form (http://schnupperkurs.org/ratingen/golf/schnupperkurs-golfclub-hoesel/) doesn’t show any text when it is beeing written in a field. It seems like there is no room for text in the fields anymore.
What can I do?
Thanks for your help.
Timo
Lee
Hi!
This was exactly what I was looking for!
I was looking for a 3 column design so amended your code to suit.
i will add the code here if that is ok?
HTML:
[text* name id:name placeholder “Enter your first name”]
[email* email id:email placeholder “Enter your email address”]
[textarea* message id:message placeholder “Enter a message here”]
[submit id:submit]
#responsive-form{
max-width:940px /*– change this to get your desired form width –*/;
margin:0 auto;
width:100%;
}
.form-row{
width: 100%;
}
.column-half, .column-full{
float: left;
position: relative;
padding: 0.65rem;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.clearfix:after {
content: “”;
display: table;
clear: both;
}
.wpcf7 input[type=”text”], .wpcf7 input[type=”email”], .wpcf7 textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.wpcf7 input[type=”text”]:focus{
background: #fff;
}
.wpcf7-submit{
float: left;
background: url(‘my button image!’) top left no-repeat transparent;
width: 201px;
height: 57px;
text-indent: -50000px;
border: none;
padding: 8px 20px;
cursor: pointer;
}
span.wpcf7-not-valid-tip{
text-shadow: none;
font-size: 12px;
color: #fff;
background: #ff0000;
padding: 5px;
}
div.wpcf7-validation-errors {
text-shadow: none;
border: transparent;
background: #f9cd00;
padding: 5px;
color: #9C6533;
text-align: center;
margin: 0;
font-size: 12px;
}
div.wpcf7-mail-sent-ok{
text-align: center;
text-shadow: none;
padding: 5px;
font-size: 12px;
background: #59a80f;
border-color: #59a80f;
color: #fff;
margin: 0;
}
/**—————- Media query —————-**/
@media only screen and (min-width: 48em) {
.column-half{
width: 50%;
}
.column-one-third {
width:33%;
float:left;
}
.wpcf7 textarea {
margin-left: 20px;
height: 100px;
}
.wpcf7-submit{
margin-left: 40px;
}
}
I used id’s for the name email and message but that was because of another design I was doing!!
By the way, thank you so much for sharing this!
Toni
Thank you very much!!!! Great job!!!!
Dex
Hi,
How do I make email field required?
Looking forward to hear from you.
bage
it can be easily done while creating the form.
Atheng
Bage,
Great tutorial and form. After plugging all the snippets, I found that the Email and Phone text field with different height. Email with 288px by 42px and Phone with 288px by 34px.
Please help.
Thanks
Henry
Hello there,
I have a little problem with the contact form. If you take a look at my website http://www.aguest.nl/cms/contact/ you can see that that there is space between the fields. IfI push on send button than the error messages do not connect to the fields. On another site I’ve used it and it works prefect. What am I doing wrong?
Voornaam [text* first-name]
Achternaam [text* last-name]
E-mail [email* your-email]
Telefoon [text* your-phone]
Onderwerp[text* your-subject]
Geboortedatum (gratis huidanalayse)[text geboortedatum]
Uw bericht [textarea your-message]
[submit “Verzenden”]
And in my CSS this code:
/* contactformulier begin */
#responsive-form{
max-width:825px /*– change this to get your desired form width –*/;
margin:0 auto;
width:100%;
}
.form-row{
width: 100%;
}
.column-half, .column-full{
float: left;
position: relative;
padding: 0.65rem;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.clearfix:after {
content: “”;
display: table;
clear: both;
}
/**—————- Media query —————-**/
@media only screen and (min-width: 48em) {
.column-half{
width: 50%;
}
}
.wpcf7 input[type=”text”], .wpcf7 input[type=”email”], .wpcf7 textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.wpcf7 input[type=”text”]:focus{
background: #fff;
}
.wpcf7-submit{
float: right;
background: #7dbeb6;
color: #fff;
text-transform: uppercase;
border: none;
padding: 8px 20px;
cursor: pointer;
}
.wpcf7-submit:hover{
background: #083543;
}
span.wpcf7-not-valid-tip{
text-shadow: none;
font-size: 12px;
color: #fff;
background: #7dbeb6;
padding: 5px;
}
div.wpcf7-validation-errors {
text-shadow: none;
border: transparent;
background: #7dbeb6;
padding: 5px;
color: #fff;
text-align: center;
margin: 0;
font-size: 12px;
}
div.wpcf7-mail-sent-ok{
text-align: center;
text-shadow: none;
padding: 5px;
font-size: 12px;
background: #7dbeb6;
border-color: #083543;
color: #fff;
margin: 0;
}
/* contactformulier einde */
Xavi
Hello,
just a quick question, i’ve done everything and seems that it works perfect but there’s one thing i would like to change. My form is only two columns if i make my safari window very big and i would like to keep it two columns from lets say 600px to infinite, and become all in one column if the browser is detected smaller than 600px width. What should i modify to get the efect that i want?
Thanks in advance for your kind attention
John
Can I use these css code on optimizepress theme? Or on OptimizePress CHILD theme?
How??????????????
bage
Like in any other theme.
Oren Zur-Shavit
Thanks a lot!
a very helpful article!
Thurain
Awesome! Combine your tutorial and below link tutorial, I am able to add amazing contact form for my website.
http://www.elioverbey.net/customize-and-style-the-contact-form-7-wordpress-plugin/
Thank you.
tomm
Thanks for the explanation, but I think there is a slight error.
When a single field on the right is entered by a user (like Last Name in the example) and the submit button is pressed, the entry boxes will shift vertically because of the validation tips.
Any suggestion on how to solve this?
Thanks for your efforts!
Alejandro
Hi Bage,
I posted a message on the old tutorial but here I am in the new one.
This is the link to the form I want to use for my employer’s site. It will be “charter quote request” form which includes multible rows in a 2 column form and also a drop down field to select preferred airplane.
Can you help me out on how to style this form? Do i have to add the css code to the Form Editor where the html code goes? I have very little knowledge about WP, just starting to learn it to slowly modify the website. Do i need any other plugins or anything in order to display CSS styles on my WP site?
Thanks in advance
Alejandro
Nvm i Figured it out!
Alvin
Hey Bage,
Thanks for providing the codes as I had spent hours on trying to make the form responsive.
I’m currently using the Avada WordPress theme for one of my websites, and I can’t seem to style the submit button.
Is there a way to make the background transparent?
Many thanks for your help!
Cheers,
Alvin
Menno van der Krift
This is awesome. Exactly what i needed for my client! saving this page as bookmark for future clients and do some experimenting with the code 🙂
Florian DENIS
Thank you, it was exactly what I was searching for and it works perfectly !
fernanda
Hey, congrats for the tutorial.
I’m not able to config this form, could you give a hand?
I’d like the three itens from de left to have the same size as text area on the right, but when I chance the navigator it goes wrong.
Tks in advance
Ole
Thanks this works great!
tim
when i copy in the css to the styles.css nothing changes 🙁
bage
Do you have a URL, which I can check please?
Kai
Hi, thank you for the tutorial. At this URL http://199.116.248.13/~xlreiser/booking2/ I’m working on a form. The first input object is a pull down menu. It did not become responsive, or styled as the rest of the input boxes. I’d be grateful for any assistance. All elements must be responsive. and preferably also styled the same.
bage
You have to style the
select
element to match theinput
elements. to start.wpcf7-select{
width:100%;
max-width:100%;
}
and go from there.
Kai
Thank you!
Maria
Hi Badge,
Thanks for the great tutorial! I am having a bit of trouble. It all seems to be working fine at desktop size. When I make my window smaller and it turns to 1 column, then I cannot select the Name field anymore or the Dropdown menus (only one seems to keep working). Could you please have a look?
http://lisbondestinationtours.com/request-tour-responsive/
Thanks! Maria
Rochelle
thank you for sharing your code. Now I can start doing what I want to.
Pablo
Hi there!
We experienced the same “hassle” when using Contact Form 7. That’s why we decided to develop our own form builder plugin for WordPress. The result is PlanSo Forms.
With PlanSo you can easily create multi-column forms via drag-and-drop.
Please feel free to check it out and let us know how you like it. You will find it in the WP Plugin directory: https://wordpress.org/plugins/planso-forms/ or via our homepage http://forms.planso.de.
Cheers
Georges
works great! Thanks
JUNIOR
Perfect!
Thank you…
querystore
dear sir, i want select a service to be in full like name field
and i want a contact a form like here http://www.zimmber.com
please help me.
thanks.
Joseph
This is a perfect tutorial. Thanks, worked like a charm.
Derek
Thanks so much for posting this. So useful! One quick question. When I hit submit on my form, I get a green box around the top part of the form with Your message was sent successfully. I tried removed the CSS that looks to add this to the validation, and it still does not work. Is there any way to get rid of any of the validation checks and have the result put at the bottom of the screen?
Derek
If you want to see an image of what I see when I click submit, here is one http://i61.tinypic.com/vdlab6.png The form clears when I click submit, which is fine.
Oren Zur-Shavit
Thanks!
Works like a charm..
Lister
hi, its a perfect tutorial, i just want to ask, how to change the background of the whole contact form example: background-color: #ddd
thanks
Simone
Hello!
Great tutorial!
I’ve a problem with my form. Could you please check it?
http://www.sipo2015.it/modulo-iscrizione/
Thanks in advance
Balachandra
Thank you very much.
I am a newbie to wordpress. Your code has saved a lot of time
shim
hi
i am trying to set all he fields in the same line
but i am stock, i have tried couple of thing and could not figured it out
any advise ?
thanks
Thomas
Hi,
ia am using this form and it works fine. Now i tried to use it in another projekt and the email that is sent is noch formatted the richt way. It should look like:
Nachrichtentext/Buchungsanfrage:
Von: Thomas Paschen
Adresse: Maiermühle 11 83334 Inzell
Telefon: 08665 218558
Email: [email* email]
But the Emai looks like:
Nachrichtentext/Buchungsanfrage: Von: Thomas Paschen Adresse: Maiermühle 11 83334 Inzell Telefon: 08665 218558 Email: [email* email] — Diese E-Mail wurde von einem Kontaktformular von Pension und Gästehaus Restner (http://www.pension-restner.de/wordpress) gesendet
Could you help?
Thanks
george
There’s quite a large gap between the box levels. Is there a way to shorten that so that they’re no so spaced height wise?
Martin
Thanks mate this worked perfectly!!!
elena r.
thanks! very helpful.
Ralf
Hi,
I have installed the contact form according to your specifications and inserted in Childtheme in the style css. But it does not work.
Share please have with the error I made myself.
Best Regards
Ralf
Sander
Hi, where do I have to put this code?
.wpcf7 input[type=”text”], .wpcf7 input[type=”email”], .wpcf7 textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.wpcf7 input[type=”text”]:focus{
background: #fff;
}
.wpcf7-submit{
float: right;
background: #CA0002;
color: #fff;
text-transform: uppercase;
border: none;
padding: 8px 20px;
cursor: pointer;
}
.wpcf7-submit:hover{
background: #ff0000;
}
span.wpcf7-not-valid-tip{
text-shadow: none;
font-size: 12px;
color: #fff;
background: #ff0000;
padding: 5px;
}
div.wpcf7-validation-errors {
text-shadow: none;
border: transparent;
background: #f9cd00;
padding: 5px;
color: #9C6533;
text-align: center;
margin: 0;
font-size: 12px;
}
div.wpcf7-mail-sent-ok{
text-align: center;
text-shadow: none;
padding: 5px;
font-size: 12px;
background: #59a80f;
border-color: #59a80f;
color: #fff;
margin: 0;
}
Marco
Hello Bagerathen,
wonderful styling, thank you.
I got a problem: My subject is not 100% row, I dunno why. Could you please help me?
My site is still In Construction. However I can provide you access if needed.
Ragrads, MT
Ivy
Thanks for the tutorial! I’ve encountered an issue though – the Google reCAPTCHA stopped working. The reCAPTCHA image still appears but it’s not linked (can’t click on the box) and the “Send” button works without having to click on reCAPTCHA. Hoping you could help!
Thanks in advance!
I
never mind, I figured it out 🙂
Ron van Gerven
Thanks for the tutorial, works great!
Swapnil
Thanks!!!
Its work amazing… I have used your previous code that was not working for me but i have tried this and its work on the first attempt
Remco
Bage,
You’re brilliant! Thanks for this snippet!
Josh
Thanks for putting this up. Easy to follow and works a treat.
Only thing i am finding is that when it displays on a mobile device i am getting the fields running edge to edge of the screen with no margins or padding. Any suggestions here. just a little bit of breathing space down either side would tidy it up nicely.
Cheers
J
Akansha
Hi, thanks a lot for making contact form such a easy task.
I have no knowledge of CSS but I did it with the help of the code you have provided.
There is one issue that I am facing on my site. Look at the screenshot please.
There is space on the right in text area box and a issue in validation.
https://drive.google.com/file/d/0By_vZEM2YaxDSGJHQ0VmSVZjbFE/view?usp=sharing
Terry
Hi,
I am trying to create two Contact 7 forms for my site, one with only the one column (easy out of the box), but then I want another that is two columns & responsive.
My question is, where do I put the css code to do this so that it only affects the one form?
TIA
Terry
Terry
Hi,
Not to worry about the previous post……all sorted
Thanks for the great post above…all worked out through the excellent material in there.
Best wishes
Terry
Efrain
Thanks for this code it look really good.
For some reason when I view the form on my cell the select field do not adapt properly. I tried adding the following code but the width wont take effect:
.wpcf7-select {
width: 100%;
max-width: 100%;
}
Here is the page with the problem:
http://maidquick.com/request-free-estimate/
Thanks!
Andreas
Hi,
thanks for this great tutorial!
Just one problem: in desktop mode it works fine, but in mobile view the first and third formrow (First name & Email) are not accessible.
Any idea what could cause this?
Kind regards
Andreas
Maxine
Hey Andreas
I’m have the same issue here for First Name… Did you find a fix for this by any chance?
Regards,
Maxine
Bruce Lavigne
Ok, I copied/pasted the CSS into the style.css file and changed the code on the form itself, but I can’t get the CSS to work.
Any ideas?
Steffi
Hi, I am very happy that I found your code. Thank you for sharing it! It works great for me. However the css styling for the :focus of the textarea is troubling me as it does not change the background color, whatever I try in the css-styles.
What works is:
.wpcf7 input[type=”text”]:focus{
background: #fff;
}
.wpcf7 input[type=”email”]:focus{
background: #fff;
}
What does not work:
.wpcf7 input[type=”textarea”]:focus{
background: #fff;
}
Any advice?
I used your responsive code also the styling and wanted to adjust it a bit.
Thanks alot for helping, Steffi
Mathieu Mantrant O'Dowd
Thank you Bagerathan, this was very useful, and very simple to implement.
Tim
Thank you for posting this solution.
I have a large form to create and this will help a lot!
Craig Leigh
Thank you for the tutorial. Everything you have written works exactly but now I have one slight issue. Since using the tags to give the form some style, my entire website now has a roughly 10px border around it. The same is on the home page. I cannot find anywhere in the CSS that will change it but as soon as I deactivate the CF7 plugin, the site returns to normal.
antonella crisafulli
hi, just wanted to say thanks for the guide. it works perfectly and if you know little more of html you can even change some small details at your own preference.
i suggest it to everyone!
Michael Njogu
Hi!
Thanks for the info! Really helpful. Works perfectly.
Rams
No questions here, just compliments! Thank you for writing this piece 🙂
BC
This is the most helpful article I’ve found in a long time – awesome advice and really easy to follow. THANK YOU!!!
Jacqui
Thanks for the info – I managed to set up a three column form and it works a treat!
http://www.mrnwatch.org.za/pet-register/
I now need to clearly mark splits between segments of my data, but doesn’t seem to work. Any advice?
Jacqui
Martin
Thank you very much for this! I was looking hours for some good solution and this is the best I could have found.
Rene
Hi, I made my form based on yors, but it’s bugging the footer of the layout, I wish you could help me with that.
You can see that the footer of the layout with the form is not full page like it’s on the page that don’t have the form.
http://www.carroeseguro.com.br/contact
http://www.carroeseguro.com.br/
* Sorry for the bad English, not my native language. And thank you so much for the code.
Yves
Hi Bage,
Thank you for sharing with us simple ones your knowledge. Very helpful. How do you style the message that’s come up after clicking on send? Here’s where the message goes after sending the form. http://aomtinfo.org/course-evaluation
Thanks
Yves
Danny
Thanks for much for this. Im slowing picking up CSS on my new site and ive managed to not only get this working but looking nice. I have one little issue though and I hope your knowledge can help.
On my site http://www.mintyslippers.com I have a contact form. All works great except if ANY of the left columns fail validation the tooltip seems to push things along one column and it makes the alignment go wrong. Doesnt seem to be a problem if items in the right column fail. Any ideas?
bage
You can add the following css to make it work as you expect.
.form-row:after{
content: "";
display: table;
clear: both;
}
Scott
Hi Bage,
This post is awesome, thank you. I’m having issues with taking this to three columns. It lays out fine on desktop but responsive on the phone does not break the three columns into three individual lines, so it looks bad. What the heck am I missing? Here’s my code…
.column-one-third{
float: left;
position: relative;
padding: 0.65rem;
width:33%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
First Name* [text* first-name]
Last Name* [text* last-name]
Email* [email* your-email]
Phone* [text* your-phone]
Your Age* (Minimum age is 15 years old.)[text* your-phone]
Subject [text* your-subject]
Your message [textarea your-message]
[submit “Send”]
Scott
Hmmm, stripped the code, lets try this again.
[code]
First Name* [text* first-name]
Last Name* [text* last-name]
Email* [email* your-email]
Phone* [text* your-phone]
Your Age* (Minimum age is 15 years old.)[text* your-phone]
Subject [text* your-subject]
Your message [textarea your-message]
[submit “Send”]
[/code]
Scott
I give up, not sure why your form is stripping out the html.
First Name* [text* first-name]
Last Name* [text* last-name]
Email* [email* your-email]
Phone* [text* your-phone]
Your Age* (Minimum age is 15 years old.)[text* your-phone]
Subject [text* your-subject]
Your message [textarea your-message]
[submit “Send”]
Gregory
Perfect, it was exactely what i wanted.
One question: How / which css lines should I add or modify in order to have my formular in the same appearance when I want to print it?
The appearance is currently not the same When I Click on CTRL + P.
It would be great if you have an answer.
greetings from Germany
Grégory
Alex R.
Nice tips. Can we reuse the code with Bootstrap? I’m using it and don’t want to rewrite all CSS.
Jean-Joseph NAPOLEON
I cannot thank you enough sir. My WPCF7 looks better now!
JohnT
Thanks for this – seemed to work very well
Steve
Hello,
I’m trying to create a form with four columns but the fields are close to one another and I would like to have more space between the columns. How can I achieve this? Thank you.
Here is what I’m working with below:
#responsive-form{
max-width:1200px /*– change this to get your desired form width –*/;
margin:0 auto;
width:100%;
}
.form-row{
width: 100%;
}
.column-one-fourth{width:25%; float:left}, .column-half, .column-full{
float: left;
position: relative;
padding: .65rem;
width:100%;
-webkit-box-sizing: width:200px;
-moz-box-sizing: width:200px;
box-sizing: border-box
}
.clearfix:after {
content: “”;
display: table;
clear: both;
}
/**—————- Media query —————-**/
@media only screen and (min-width: 48em) {
column-one-fourth{
width: 25%;
}
}
.wpcf7 input[type=”text”], .wpcf7 input[type=”email”], .wpcf7 textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
-webkit-box-sizing: width:200px;
-moz-box-sizing: width:200px;
box-sizing: border-box
}
.wpcf7 input[type=”text”]:focus{
background: #fff;
}
.wpcf7-submit{
float: right;
background: #CA0002;
color: #fff;
text-transform: uppercase;
border: none;
padding: 8px 20px;
cursor: pointer;
}
.wpcf7-submit:hover{
background: #ff0000;
}
span.wpcf7-not-valid-tip{
text-shadow: none;
font-size: 12px;
color: #fff;
background: #ff0000;
padding: 5px;
}
div.wpcf7-validation-errors {
text-shadow: none;
border: transparent;
background: #f9cd00;
padding: 5px;
color: #9C6533;
text-align: center;
margin: 0;
font-size: 12px;
}
div.wpcf7-mail-sent-ok{
text-align: center;
text-shadow: none;
padding: 5px;
font-size: 12px;
background: #59a80f;
border-color: #59a80f;
color: #fff;
margin: 0;
}
bage
You can just increase the padding
Steve
Hello bage,
How can I change the CSS to allow for 4 columns and then how can I adjust the spacing between each column?
Thank you.
Steve
bage
Make the column width to 25% instead of 50%.
simon
Hi bage
First: Thank you so much for this form-modifications. This is just brilliant!
But: There remains one question–> How can i bring the textboxes of the two columns on the same height? Their height differ about a half of a textboxsize.
I really tried to find a solution on my own, but i failed..
Eugenio
how do i obtain black borders around each field?
Daniele
Hi,
thank you for tutorial.
Would appreciate your help. When I try to send message, I get: “Your message was sent successfully.”, but there is no email. I have checked email address in Contact Form > Mail, also spam folder, but I dont’t receive emails.
Can you help?
Thank you in advance
bage
You should check weather you server sending emails. You could try installing WordPress SMTP plugin and configure it.
Daniele
Hi,
you were right. Thanks
Now I´m trying to make space between 2 fields in one row(email and phone number). I put id class in HTML, then styled CSS: #spaces {
margin-right: 40px;
}
When I put margin-left it works, but with margin-right nothing.
Also I did some styling to placeholder text, styles all placeholder text, except number field. ..?
Any advice would be appreciated
Thank you
Dorina
Hello,
I followed all the steps and copy the hole css file but my contact form the the “subject” is to short (the same size than name and phone. And my message field is also to small.
You can have a look on my Website.
Greetings
Dorina
Hi,
I fiexed my problem =)
Jon
Perfect tutorial. Thank you!
Worked first time and totally logical to customise.
Sueli
Works!
Thanks for posting it!
Mo
Thank you for a great tutorial. I followed the instructions initially and the form displayed correctly, but for some reason, the CSS styles are not creating the 2-column format and everything is displaying in one column. I have scoured through the code to see if I missed anything, but cannot seem to locate the problem. Can you review my code and see if I am missing anything? Thanks.
Also, do you know how to align the recaptcha box with the rest of the form? I have tried a few tricks, but am unable to target it properly.
/*** ———- CONTACT FORM 7 ———- ***/
#responsive-form {
max-width: 1170px;
margin: 0 auto;
width: 100%;
}
.form-row {
width: 100%;
}
.column-half, .column-full {
float: left;
position: relative;
padding: 0.65rem;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.clearfix:after {
content: “”;
display: table;
clear: both;
}
.wpcf7 input, .wpcf7 textarea, .wpcf7 placeholder {
font-family: ‘PT Sans’, sans-serif;
font-size: 16px !important;
}
.wpcf7 input[type=”text”], .wpcf7 input[type=”email”], .wpcf7 textarea {
height: auto;
width: 100%;
padding: 5px;
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.wpcf7 input[type=”text”]:focus, .wpcf7 input[type=”email”]:focus, .wpcf7 textarea:focus {
background: #f2f2f2 !important;
}
.wpcf7-submit {
float: right;
background: #CA0002;
color: #fff;
text-transform: uppercase;
border: none;
padding: 8px 20px;
cursor: pointer;
}
.wpcf7-submit:hover {
background: #ff0000;
}
span.wpcf7-not-valid-tip {
text-shadow: none;
font-size: 12px;
color: #ff0000;
padding: 5px;
}
div.wpcf7-validation-errors {
text-shadow: none;
border: transparent;
background: #f9cd00;
padding: 5px;
color: #9C6533;
text-align: center;
margin: 0;
font-size: 12px;
}
div.wpcf7-mail-sent-ok {
text-align: center;
text-shadow: none;
padding: 5px;
font-size: 12px;
background: #59a80f;
border-color: #59a80f;
color: #fff;
margin: 0;
}
/* Contact Form 7 column adjustments */
@media only screen and (min-width: 48em) {
.column-half {
width: 50%;
}
}
======= 2-column CONTACT FORM =======
[text* first-name placeholder “Enter your first name”]
[text* last-name placeholder “Enter your last name”]
[email* your-email placeholder “Enter your email address”]
[text* your-subject placeholder “Subject”]
[textarea your-message placeholder “Message”]
[recaptcha]
[submit “Send”]
Erna
Great tutorial! Thank you!
Nahid Ahmed
Nice and clear … It really helped ………
Thank you
Adair
PERFECT!
david
Thnx for this simple but effective code
Nicole
thaaaaaank you so much!
you have know idea how long I spent to finally have a decent 2 column contact form.
Russ McClay
Incredibly helpful tutorial, bage! Worked perfectly. Thank you so much!
Paulo Octávio Tassinari
Great tutorial, buddy! I owe you one! Really great. I learned many technics following your codification.
I’m really pleased. Excellent! Thank you!!
Tash
Thank you!!! Works perfect even with the new Contact Form 7!
Roger Green
Hi,
I have copied the first “Let’s look at the css styles for our two column grid” and the “HTML Markup” and it looks exactly as it should – and it almost works. However I can’t type into the first line. If I create a new first/top line I can now type into the old first/top line (which is now the second line) but not the new one. Does this make sense?
Any ideas?
Regards
Roger
Silvia
Thank you very much! A wonderfull tutorial!
tuna
hi, thanks for great code 🙂
please help me how can i add drop down menu ?
thanks alot
Eliezer Halpern
Thanks so much!
uncl_k
Thank you lots! I want to implemet a date picker http://contactform7.com/date-field/
and a dropdown into the two column form. Works great i not bothering to put them in two columns, but as soon as I but them into the “form row” class, then the boxes will not accept input.
selected day [date* your-date min:today max:2017-12-31 step:1 class:required “date today”]
selected time [select menu-32 “0800” “0900” “1000” “1100” “1200” “1300” “1400” “1500” “1600” “1700”]
How can this be??
Mark
Nice tutorial, works great. Thanks!!!
Cao đẳng dược
hey.
what i can paste responsive code to style.css or other css file?
Furniture Singapore
Exelent.. works great, Thank you so much !!
Gregory Wiel
Great tutorial, it helped me a lot! I just had to change the code a bit for making it better. But great!
Chad Raymond
BEFORE Noon, the code worked perfectly for the Job Application form I’m building.
AFTER Noon, my columns started getting wonky. I’ve checked my /div tags and it seems as though everything’s right. What am I doing wrong?
ALSO, I want to slim the space between fields in rows but retain the space between fields in the columns.
Please help!
Clara
Hello,
When I add a select and text on the same collumn, it breaks the line.
What could it be?
Thanks!
Marius
Thank you so much for this – I literallyl spent 3 hours trying to fix css issues with CF7, then found your blog – fixed it.
Lots of love
Acir Gomes Junior
Olá, como montar 3 colunas?
Obrigado.
Diony
Hi, thanks for this tutorial!
I´m trying to insert the three collumns: insert field name / field e-mail and field submit
But not is in the same line.
I´m using this code below:
FORM CODE:
Nome: [text* first-name]
Email [email* your-email]
[submit “Enviar”]
CSS CODE:
div.wpcf7 {
background-color: #eff9fb;
padding:20px;
}
.wpcf7 input[type=”text”],
.wpcf7 input[type=”email”],
.wpcf7 textarea {
background:#c9faff;
color:#022940;
font-family:lora, sans-serif;
font-style:italic;
}
.wpcf7 input[type=”submit”],
.wpcf7 input[type=”button”] {
background-color:#022940;
width:100%;
text-align:center;
text-transform:uppercase;
}
#responsive-form{
max-width:600px /*– change this to get your desired form width –*/;
margin:0 auto;
width:100%;
}
.form-row{
width: 100%;
}
.column-half, .column-full{
float: left;
position: relative;
padding: 0.65rem;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.clearfix:after {
content: “”;
display: table;
clear: both;
}
/**—————- Media query —————-**/
@media only screen and (min-width: 48em) {
.column-half{
width: 40%;
}
.column-one-third {
width:20%;
float:left;
}
.wpcf7-submit{
margin-left: 20px;
height: 40px;
}
Uzo
A very awesome tutorial. Bage! you’re the man. You save me all the headaches. Thanks a gazillion times.
Kenneth
Hi, Nice tutorial you got over there.
Im wondering can the code apply to only a specific form? i’ve got few contact form and i do not want to apply this styling to all of them.
please help! appreciated!
Bash
Thanks for the code. I copied the codes, but i am having problem. although it came out as expected in the web browswer, however it is not responsive. The styling is now working on mobile devices, please i need you help.
Thanks
#responsive-form{
max-width:800px /*– change this to get your desired form width –*/;
margin:0 auto;
width:100%;
}
.form-row{
width: 90%;
}
.column-half, .column-full{
float: left;
position: relative;
padding: 0.65rem;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.clearfix:after {
content: “”;
display: table;
clear: both;
}
/**—————- Media query —————-**/
@media only screen and (min-width: 48em) {
.column-half{
width: 50%;
}
.wpcf7 input[type=”text”], .wpcf7 input[type=”email”], .wpcf7 textarea {
width: 100%;
padding: 8px;
line-height: 16px;
font-size: 14px;
border-width: 2px;
border: 0px solid #ccc;
border-radius: 10px;
-webkit-box-sizing: border-box;
-webkit-box-shadow: 0 2px #ccc;
-moz-box-sizing: border-box;
box-sizing: border-box
}
input[type=submit], button {
background-color: #2f276a;
color: #ccc;
border: none;
padding: 4px 349px;
-webkit-border-radius: 6px;
}
}
Samuel
Very useful, thank you! 🙂
Leonardo
Hi, for me not work…
my code is equal your code… but not stay two column in same line… you can help me?
my style.css;
#responsive-form{
max-width:550px /*– change this to get your desired form width –*/;
margin:0 auto;
width:100%;
}
.form-row{
width: 100%;
}
.column-half, .column-full{
float: left;
position: relative;
padding: 0.65rem;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.clearfix:after {
content: “”;
display: table;
clear: both;
}
/**—————- Media query —————-**/
@media only screen and (min-width: 48em) {
.column-half{
width: 48%;
}
}
.wpcf7 input[type=”text”], .wpcf7 input[type=”email”], .wpcf7 textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.wpcf7 input[type=”text”]:focus{
background: #fff;
}
.wpcf7-submit{
float: right;
background: #CA0002;
color: #fff;
text-transform: uppercase;
border: none;
padding: 8px 20px;
cursor: pointer;
}
.wpcf7-submit:hover{
background: #ff0000;
}
span.wpcf7-not-valid-tip{
text-shadow: none;
font-size: 12px;
color: #fff;
background: #ff0000;
padding: 5px;
}
div.wpcf7-validation-errors {
text-shadow: none;
border: transparent;
background: #f9cd00;
padding: 5px;
color: #9C6533;
text-align: center;
margin: 0;
font-size: 12px;
}
div.wpcf7-mail-sent-ok{
text-align: center;
text-shadow: none;
padding: 5px;
font-size: 12px;
background: #59a80f;
border-color: #59a80f;
color: #fff;
margin: 0;
}
Avant
Hi,
First of all thanks for this great post helped me a lot to change my contact form in the design i want it.
But unfortunately i found a bug in the css code.
When ever someone send a form which has not filled all the requirements fields the red box beneath every required field shows up which is normal but when you fill in like 1 field ans still have not filled some of the required fields and try to send the form again all the layout of the forms will be messed up i made a screenshot so you can understand the problem better. Hopefully there is fix for this. and thanks again for this great post. please take a look ate screenshot on this link: http://s18.postimg.org/od46svzi1/form_bug.png
Praveen
I have copied the CSS in my local server which I have setup for practice. When I am copying the style sheet it is not reflecting in the main contact form at front end. Can I know the reason.
Daniel Bencik
Hello!
First off, thank you for a tutorial!
Secondly, in my case, the formatting does not work as expected. Basically, the CSS does not even kick in I have looked at the code, but I am unable to find the problematic spot. I have copy-pasted the code from this site and changed nothing.
I have created a sample page to demonstrate the problem at http://www.bencik.cz/contactformproblem/ – if you could take a look at it, I would be grateful.
Many thanks,
Daniel
Daniel Bencik
Sorry, got it solved. I was writing the CSS code to a wrong place … Many thanks!!
Konstantinos
Thanks!
Lissi
Some one can tell me where I find the place for put HTML an CSS I have MH-Magazine Theme
sam
thank you for this guide, that was really helpful
Vizeye Basvur
Thank you for great info. It has been very helpful.
Miranda
Hello and thank you for posting such a lovely styling method to Contact Form 7. I am very happy with how it has allowed me to organize our contact page with great opportunity to gain information that will enable us to assist our clients.
After styling my new contact form, and adding some check boxes and drop down forms, I successfully sent a test e-mail through my website.
When I check the e-mail I received, the name fields, and check boxes, and drop down information were not included! Can one of you potentially assist in resolving this issue?
Thanks in advance!
Miranda
Bas
Thank you very much for this great tutorial!
Jens
Thanks for the great tutorial, it works perfect for me.
Niso
Trying to put 4 columns in one row.
Can you help me out please?
Aries
the one row is not working in mobile view
Shahab
Wonderful!!! Great!
I’ve been waiting and searching for this for a long time.
Thanks a lot 🙂
ian
Hi,
I would really like to use your form in my current web page.
I have added the HTML to my page & have copied the CSS to a css file names as your example.
Where am i to put the Style the form now code ?
I added it to the css ?
Please take a look at my page and advise where i went wrong.
http://www.theremotedoctor.co.uk/test-form2.html?scrollto=content
Many thanks for a great write up.
Janet Slinkard
I’m using minamaze pro child theme (think up themes). I used your tutorial on another site with beautiful results, but this time it isn’t working! Can you take a look, please?
Jo
Hm, second row (subject and message) are not filling the row, the just use about 60% of the line space.
Love Shayari
very helpful information for css form builder.
Tom
Just wanted to say thank you very much. This is really great and working quit fine.
Just one problem I cant solve. When I do not fill required fields and hit send, of course the red message “Required field” pops up but also all the fields under the message are moved on position.
To explain better, lets say the rows are like this
Last name – First name
E-Mail – Phone
Website – Company
Not filling in the Last name (required) the fields move like this
Last name – First name
EMPTY – E-Mail
Phone – Webite
Company
I cant find out how to fix this.
Thank you very much in advance!!!
Nikos
Thank you very much for your post.
I use your code every time I make a contact form!
Thanks!
Nikos
Greece
Thomas ROssi
Hi,
First of all, thank you for this wonderful tip, it works like a charm !
Well, almost 🙂
When I fill up my fields and submit, the green confirmation message is displayed in a very odd place, at the top, under the top fields…
That’s pretty ugly, how can I make it look better, like appear under the submit button ?
Thomas ROssi
Solved !!
pixelsophie
All right, thanks a lot for the great TuT!
Ruben
Excelente! Muchas gracias!
Donald
Great form worked perfectly as you said it would. I have 1 problem: I cannot edit the mail, messages or additional settings tabs – it’s just blank when i click these tabs so I am unable to define what should be in the email body as well as what email address the form is being sent to. Any help would be greatly appreciated!
Thanks
Donald
Jamie
Thanks for the tutorial. I have input the html into my contact form and placed the CSS in my style.css child theme stylesheet but for some reason the form isn’t picking up the CSS. I have also tried putting it into my custom css textfield in my WP theme with no luck. Any ideas?
Thanks in advance.
Rafael Dantas
Really nice tutorial! Thankyou for share this!
Angus
Thanks for the code it was exactly what I was looking for. It didn’t work at first, with the CSS pasted into the Enfold Child Theme. So I included a custom css plugin and put it in there. Sorted!
Now the 2 column part works, but not the second piece of CSS coding. I’ve looked through all the comments, and but can not work out where the issue lies.
The link above is the test page, with various other parts on it!
The contact form for the enfold theme is so basic and doesn’t send data to MailChimp as CF& does.
Many thanks
Anhgus
Ilja
Thank you for code!
if someone wants to integrate recaptch, you have to modify the end of the form code:
[recaptcha]
[submit “Send”]
frank
Thank you VERY MUCH! You saved my 7 hours of running around. Here, look at it again. https://bimprojects.org/contact-us/
Peter
Thanks for the description! It was very useful!
Peter
arta
Thank you. amazing tutorial
Danish
HI
How do i make 4 columns?
John
.column-half
width: 50%
Thubz
Hey man.. Just want to give a quick shout out, this works magic.
For those of you who have a problem with accessing the stylesheet, you can use a plugin called SIMPLE CUSTOM CSS.
Christie
Thank you so much for this, WPSnippet! I used it with my own styling – it looks beautiful and works perfectly.
Aurovrata V.
Hello, sharing some love and goodness on this topic…
there is now a cf7 plugin extension that will so this out of the box for you with an integrated UI editor, multiple-columns, reponsive, tables of fields, and much more. Check out the CF7 Smart-grid Extension (https://wordpress.org/plugins/cf7-grid-layout/)
Ruben
como se hace eso pero con tres columnas
Marino
Thanks for the great job.
How can I style the height of the textarea your-message only?
I tried to assign an ID to the field and style it in the Css. Nothing works. If you find a few minutes to answer I’ll be greatful.
Many Thanks,
Kun
Most of it worked perfectly fine – thanks 🙂
I have just one problem. I changed the the width from 600px to a 100% to have the form in line on the left and right with the other elements on the website.
#responsive-form{
max-width:100% /*– change this to get your desired form width –*/;
margin:0 auto;
width:100%;
But to put it exactly in line I have to change the padding to zero:
.column-half, .column-full{
float: left;
position: relative;
padding: 0rem; /*– instead of 0.65rem –*/;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
But now I have no spacing between the two columns on the desktop version.
How can I change this?
bage
For that spacing only we had the padding for .column-half, .column-full. You can just add
.column-half, .column-full{padding: 0 15px}
Mark
What about 3 columns? Can .column-third, be added? I tried, no luck
Mark
I added
.column-third{
float: left;
position: relative;
padding: 0.65rem;
width:33%;
Works Perfect!
Mark
IF I need to add a 2 column, but leave the second column blank, how can I keep the next sex of rows from aligning left of it?
[email* email placeholder “Email address”]
leaving blank
Steve
Hello,
How do I copy and past the code from the above css file into my theme style sheet so that I can at least get started and start working with it? Thank you!