I need help with customizing the column display in my Gravity Forms list field. The form works great on desktop where I can show multiple columns side by side. But when users view it on mobile devices or tablets, the columns automatically stack vertically into a single column layout. This creates a very long form that users have to scroll through. I want to keep all my columns displayed horizontally in the same row regardless of screen size. Is there a way to prevent this responsive behavior and force the columns to stay inline on mobile devices too?
just override it with @media (max-width: 768px) { .gfield_list { overflow-x: auto; } } - horizontal scrolling beats endless vertical scrolling sometimes. test it on real devices first tho.
CSS hacks work but they’re a nightmare to maintain and break every time Gravity Forms updates.
Had this exact problem last year with a client’s registration form. Instead of wrestling with CSS, I built an automated solution that grabs the form data and runs it through a custom workflow.
Here’s the thing - let Gravity Forms do what it’s good at (collecting data) and use automation to reshape how everything gets presented and processed. Set up triggers that catch mobile submissions and auto-format the output differently, or create dynamic forms that adapt based on what device people are using.
This kills the responsive layout headaches completely. No more CSS overrides breaking with updates. No more users scrolling sideways on their phones.
Automation handles it all behind the scenes. Users get a smooth experience on any device, you get clean data without the technical mess.
Latenode makes this form automation pretty simple. Connect Gravity Forms to custom logic that handles layout and processing exactly how you want.
You can force horizontal display by targeting the list field’s CSS directly. Add this to your theme’s custom CSS: .gfield_list tbody tr { display: table-row !important; } .gfield_list tbody td { display: table-cell !important; min-width: 120px; } and set a fixed width with .gfield_list table { table-layout: fixed; width: 100%; min-width: 600px; }. This stops the stacking completely. You’ll need to wrap the list field in a container with overflow-x: scroll so mobile users can scroll through all columns. I’ve done this on several client sites where keeping the table structure mattered more than mobile optimization. Just know that users will have to pinch-zoom or scroll horizontally on phones - not great UX but sometimes you need it for data integrity.
While it’s possible to maintain a horizontal layout using custom CSS, like applying .gfield_list table { min-width: 100%; white-space: nowrap; } and .gfield_list td { display: table-cell !important; }, I would advise caution. This approach can lead to usability issues on smaller screens, resulting in unreadable text and cramped inputs that force users to scroll sideways. A more user-friendly solution would be to reduce the number of columns for mobile users or switch to using separate fields, which can enhance the overall user experience.