Can’t display fields in a single column in Mobile

Hello @kiarachhan,

Thanks for writing in.

As far as I know, the WPTouch plugin takes over the display of the site pages on mobile which might be why you’re seeing the issue.

When you get the chance, can you please provide the URL of the page where I can see the form so that I can check it?

Thanks!

Hi, here is the link to the page.

https://www.kiarachhan.com/contact/

Hi, I decided to deactivate the WPTouch plugin for now, and see if that works.

Hello @kiarachhan,

Thanks for providing the link.

It looks like you have added some custom CSS to your form which is also affecting how the fields are being displayed on mobile.

To get the display sorted on mobile, please try adding these codes to your site:

@media only screen and (max-width: 600px) {
    .wpforms-container .wpforms-field.wpforms-mobile-full,
    .wpforms-container .wpforms-field.wpforms-mobile-full input {
        margin: 0 !important;
        width: 100% !important;
    }

    .wpforms-container .wpforms-field.wpforms-mobile-full .wpforms-field-row > div {
        width: 100%;
        margin: 0 !important;
    }

    .wpforms-container .wpforms-field.wpforms-mobile-full .wpforms-field-row > div:last-child {
        padding: 40px 0 0;
    }
}

I hope this helps.

Hi, The display form of the contact form is fixed so that everything is equal. With the changes, it’s more clearer to type it in the first and last name, and I think it is fine especially when you tilt the phone, but the first and last name is not on a single column.

I also don’t know how to adjust the display in tablet form. I’m not sure my measurements are correct. The tablet breakthrough is 768px.

Update. The Contact form now works, the first and last names are listed on a single column. Thank you so much.

• This reply was modified 3 years, 6 months ago by kiarachhan.