Creative Contact Form 4

[kgreen23]

Hello, I’ve taken a look at the YouTube video for the Creative Contact Form 4 and while it looks fine on desktop/laptop versions, the mobile version doesn’t seem to be responsive. Is there a way to not have everything look so close together on the mobile versions – or switch the form to one column?

[ruenel]

Hello @kgreen23,

Thanks for writing in!

The custom css given will be applied to all screen sizes. If you want to have the columns only to medium and larger screen sizes, please remove this code:

.row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.row .col {
  flex-basis: 100%;
}
.row.two-cols > .col {
  flex: 1 1 48%;
}
.row.two-cols > .col:first-child {
  margin-right: 2%;
}
.row.two-cols > .col:last-child {
  margin-left: 2%;
}

You may update it and use this code instead:

@media(min-width: 767px){
  .row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .row .col {
    flex-basis: 100%;
  }
  .row.two-cols > .col {
    flex: 1 1 48%;
  }
  .row.two-cols > .col:first-child {
    margin-right: 2%;
  }
  .row.two-cols > .col:last-child {
    margin-left: 2%;
  }
}

This code will make a one column form in smaller screens.

We would love to know if this has worked for you. Thank you.

[kgreen23]

That worked perfectly…thank you!

[friech]

We are delighted to assist you with this.

Cheers!