Stack Horizontal Form on Mobile

Ask the Community Customization
1

Need help on the horizontal form layout. Looks great on desktop and displays squished on mobile. Is there CSS code to fix this to allow the fields to stack on mobile?

Screenshot 2026-06-23 at 9.16.14 AM
Screenshot 2026-06-23 at 9.16.14 AM834×2016 39.5 KB

3

Hi there, @Kevin11 :waving_hand:

Thanks for sharing a screenshot!

This is the expected behavior for the mobile view because of the smaller width on mobile devices. Could you please specify how exactly you’d like to stack fields? I’ll be happy to check if there is a custom solution :slightly_smiling_face:

4

Thanks. Yes, I would like each field to just be stacked vertically on mobile view.

5

Are you referring to the field labels?

image
image348×315 5.66 KB

6

Like this

Screenshot 2026-06-23 at 12.55.31 PM
Screenshot 2026-06-23 at 12.55.31 PM886×2042 55.7 KB

7

Got it, thanks!

Please add this code to the Custom CSS field on the Appearance tab of your widget’s settings and let me know if you like the result :slightly_smiling_face:

@media (max-width: 600px) {
  [class*="HorizontalLayout__Grid-sc"] {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  [class*="HorizontalLayout__HorizontalSubmitButton-sc"] {
    margin: 0;
  }

  .es-field-layout-container {
    padding: 0;
  }
}
8

Perfect @Max thank you!

9

It’s my pleasure!

In the meantime, we’d like to invite you to join our Birthday Contest, where you could win 6 FREE Months for your subscription.

Check the details and join in: Birthday Contest: 10 Winners, 5 Free Years with Elfsight! 🎁