How to Display a Single Column on Mobile Devices

Overview

Would you like to display a single column on the mobile devices for all of your form fields? If you’ve set up your form fields to use columns, you may want to turn these columns into larger fields for smaller devices. In this tutorial, we’ll show you how to use CSS to force these form fields back to a single column on mobile devices.

Setup

1) Setting up the form

For the purpose of this tutorial, we’ll presume you already have your form set up using the columns for your specific form fields.

If you need assistance in setting up your form to use columns, please review this documentation.

2) Adding the CSS Class

Next, under Advanced Options, you’ll need to add wpf-mobile-custom to the CSS Classes field.

If using more than one CSS class for a field, just be sure to put a space between each class name.

Use this CSS class to display a single column on mobile

3) Adding the CSS

To display a single column on mobile for all form fields, it’s now time to add the CSS. Simply copy this CSS to your site.

@media only screen and (max-width: 600px) {
	
.wpf-mobile-custom, .wpf-mobile-custom .wpforms-field-row-block {
	float: none !important;
	margin-left: 0 !important;
	width: 100% !important;
}
	
}

And that’s all you need to display a single column on mobile devices. Would you like to use CSS to change the styling on the poll results screen? Try out our tutorial on How to Style the Poll Results Confirmation Screen.

FAQ

Q: Will this CSS work on the Credit Card field?

A: Noo, to keep the Credit Card field formatted as expected, we recommend you don’t add any CSS class names to these fields.