For AI agents: the complete documentation index is available at https://docs.clickmax.dev/en/llms.txt, the full documentation bundle is available at https://docs.clickmax.dev/en/llms-full.txt, and this page is available as Markdown at https://docs.clickmax.dev/en/faq/funnels/optimise-responsive-layout.md.
  • English

      • How do I optimise the responsive layout in Clickmax?

      Select Mobile at the top of the editor and adjust the same page for the smaller screen. Direction, visual order, width, alignment, margins and spacing can have device-specific values; content and structure remain shared.

      Before you start: open the page in the editor with an account that has permission to edit it.

      1. In Desktop, arrange the initial structure with the sections, rows, columns and elements you need.
      2. Switch to Mobile in the device selector.
      3. Select the row (Linha) or column (Coluna) you want to adjust. In Auto Layout, use Direção (direction) to choose a vertical or horizontal arrangement, then adjust Distribuição, Alinhamento and Espaçamento (distribution, alignment and spacing).
      4. To reverse a row's visual column sequence only on that device, use Inverter posição. In a vertical stack, the last item appears first. Reversing does not move elements in the page structure; turning it off preserves your chosen vertical or horizontal axis.
      5. Select each column or element and adjust width (Largura), margins (Margem Externa) and padding (Margem Interna). On mobile, use the editing panel to set width; column resize handles are available on desktop with a horizontal direction and normal order.
      6. In Visibilidade, choose Desktop e Mobile, Apenas desktop, Apenas mobile or Esconder for each element that needs a different presence on each device.
      7. Return to Desktop and confirm that your mobile adjustments did not change it. Save, reopen the page to review both devices and publish when you finish.

      For example: keep three columns side by side on desktop and choose a vertical stack with reversed order and smaller spacing on mobile. You do not need another page for those visual adjustments.

      What remains shared

      The total number of columns, adding or removing sections, and dragging an element to another column or section change the entire page structure. These actions affect both desktop and mobile, even when Mobile is selected. Replacing text or changing a button's action also applies to both.

      For a composition that exists on only one device, use separate elements or sections with desktop-only or mobile-only visibility. Visibility controls where each part appears; it does not turn devices into independent pages.

      Inherit or reset an adjustment

      Until you customize a mobile property, it follows the base style or automatic responsive behavior. Once you customize it on mobile, a later desktop edit does not replace that choice, even if the values happened to match at some point.

      The clear icon on a property and Redefinir alterações (reset changes) on a style group remove adjustments for the selected device. The other device is preserved; the current view returns to an inherited or automatic value.

      If it didn't work

      • Columns remain side by side or stack differently: check the row's direction, the column widths and the selected device. An explicitly chosen direction takes precedence over automatic stacking.
      • The order changed on desktop too: dragging or physically swapping columns changes the shared structure. To change only mobile presentation, use the visual inversion control.
      • There is no Tablet view: the editor offers Desktop and Mobile. Mobile adjustments apply up to 480 px; between 481 and 768 px, columns can stack automatically without using the Mobile profile. Check that range when previewing the page too.
      • An element disappeared: review its visibility in the editing panel.