Stack horizontal form vertically on mobile

CSS Codes Forms
1

Horizontal forms are a great fit for desktop, but they may not look as good on mobile due to limited screen space. Fields can become too narrow, causing horizontal scrolling or cut-off labels.

A simple solution is to switch the fields to a vertical layout on mobile.

To implement it, just add this code to the Custom CSS field on the Appearance tab of your widget’s settings:

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

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

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

image
image507×895 13.6 KB
image
image492×902 14.8 KB


That’s it! Now your form is displayed vertically on mobile and horizontally on desktop :sparkles:

Guys, was this solution helpful? Let us know in the comments :wink:

3 Likes