Columns not mobile responsive

Hello @gemgems89

Hope you’re doing well!

The Forminator is created in a way that the fields located in one(same) row, on mobile version these will show one under each other. In a responsive, the form is shown in one column.

It will require a lot of customization to change the order of the fields, since they are not located in the same row. Although you may try this CSS to show the fields in two rows on mobile view:

@media screen and (max-width: 992px) {

.forminator-ui.forminator-custom-form.forminator-design--flat:not(.forminator-size--small) .forminator-row, .forminator-ui.forminator-custom-form.forminator-design--flat:not(.forminator-size--small) .forminator-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.forminator-col {
    margin-right: 20px;
}
}

As a workaround, I suggest creating a second form for the mobile view only, where you may add the fields in order that you want.

With CSS we may hide on a desktop the first form, with the display:none; and on the mobile view to hide the first form that shown on the desktop.

Please advise,

Cheers,
Nastia

Hi, thanks so much for your reply and the effort you took to give me this code. I tried the code but it didn’t look good with 2 columns on mobile so I took your advice and made a separate form for mobile.

Many thanks! And great plugin!