Addressing responsiveness on AEM Adaptive forms | Community
Skip to main content
K
kolluax
Level 4
April 2, 2026
Question

Addressing responsiveness on AEM Adaptive forms

  • April 2, 2026
  • 1 reply
  • 37 views

When we design adaptive forms with 3 or 4 columns, we noticed they tend to overlap when we switch to mobile renditions, i was under impression in the layout mode, i can arrange them, so they stack up one over the other but i noticed it stays the same after reverting to desktop rendition. Am i missing anything ?

 

Eventually we will be delivering this form in headless but layout is something thats under AEM scope.

    1 reply

    partyush
    Community Advisor
    partyushCommunity Advisor
    Community Advisor
    April 3, 2026

    Hi ​@kolluax 

    In AEM Layout Mode, you can only resize or hide components per breakpoint. You cannot re-order the hierarchy.
    If you dropped a specific legacy "3-Column Layout" or "4-Column Layout" component onto the form, get rid of it. Drop your form fields directly into a standard Responsive Grid or a standard Panel container

    Stay in Edit Mode and drop your fields in a row.

    • Switch to Layout Mode. Ensure the emulator (the device icon on the top bar) is set to Desktop.

    • Click the first field, grab the blue dot on the right side, and resize it to take up 4 columns (for a 3-column layout) or 3 columns (for a 4-column layout). Repeat for the others so they sit side-by-side.

      Configure the Mobile Stack (The Critical Step)

    • While still in Layout Mode, click the emulator at the top and switch it to Mobile (Phone).

    • You will likely see the fields squished or overlapping.

    • When you switch the emulator back to Desktop, they will instantly snap back to being side-by-side. AEM saves the column-width configuration independently for each breakpoint.

    • Click the first field, grab that blue dot, and drag it all the way across to take up all 12 columns.

    • Do the exact same thing for the 2nd, 3rd, and 4th fields.

    • Because they now take up 12 columns each, AEM will automatically force them to stack perfectly on top of one another.

       you mentioned you are eventually delivering this headless. You need to know this right now before you spend hours perfecting Layout Mode configurations:

      When you resize things in AEM Layout Mode, AEM simply injects specific CSS classes into the JSON payload (e.g., aem-GridColumn--phone--12 or aem-GridColumn--default--4).

      If you are delivering this form Headless (via React, Angular, etc.), your Layout Mode changes will do absolutely nothing unless your frontend developers explicitly import AEM's aem-grid.css framework into their SPA, or write a script to map those specific AEM JSON grid properties to their own frontend CSS framework (like Tailwind or Bootstrap).

      If you are going headless, talk to your frontend team today. It is almost always easier for them to handle the mobile stacking purely in their CSS rather than you trying to enforce it via AEM Layout Mode!

       

      Thanks, Partyush 

    K
    kolluaxAuthor
    Level 4
    April 3, 2026

     Thanks ​@partyush . This is really helpful, have some questions though.

    1. We did not use any legacy column component, just as you mentioned used text box components right next to each other span across the layout.
    2. I have then tried adjusting them in the iPad breakpoint. They stayed the same at desktop breakpoint.
    3. Yes, we are using headless but i was thinking the AEM rendered (af-react-renderer) would take care of identifying the CSS class names, isnt it ?
    4. So far, we noticed the layout that we define at AEM end is being rendered correctly on react side, i mean based on the css class names.

    Thanks,

    Abhishek

    Terms & ConditionsAccessibility statement

    Loading footer...