Skip to main content

Mobile Overrides

Override any tool property for mobile devices without changing the desktop version. Pexelize uses a _override.mobile pattern in the design JSON so each content block, column, or row can look different on phones.

How it works​

Every element in the design JSON has a values object. Desktop values are set directly. Mobile-specific values go inside values._override.mobile:

{
  "type": "heading",
  "values": {
    "fontSize": "32px",
    "textAlign": "center",
    "containerPadding": "20px",
    "_override": {
      "mobile": {
        "fontSize": "20px",
        "textAlign": "left",
        "containerPadding": "10px"
      }
    }
  }
}

On screens wider than 480px, the heading renders at 32px, centered. On mobile (480px and below), it renders at 20px, left-aligned, with tighter padding.

tip

Properties not listed in _override.mobile inherit the desktop value. You only need to specify what changes.

Visibility: hide on mobile or desktop​

Use hideDesktop and hideMobile booleans directly on any row or content block to show or hide it by device:

{
  "type": "image",
  "values": {
    "src": { "url": "https://example.com/banner.png" },
    "hideDesktop": false,
    "hideMobile": true
  }
}

This image appears on desktop but is hidden on mobile. Useful for:

  • Showing a compact mobile-only layout alongside a full desktop layout
  • Hiding large images on mobile to improve load time
  • Displaying different CTAs per device

Row mobile properties​

Column stacking​

By default, columns stack vertically on mobile. Control this with row-level properties:

{
  "cells": [1, 1],
  "values": {
    "noStackMobile": false,
    "stackOrder": "ltr",
    "hideDesktop": false,
    "hideMobile": false,
    "_override": {
      "mobile": {
        "backgroundColor": "#f0f0f0",
        "padding": "10px"
      }
    }
  }
}
PropertyTypeDefaultDescription
noStackMobilebooleanfalseSet true to keep columns side-by-side on mobile
stackOrder"ltr" | "rtl""ltr"Column stacking order. "rtl" reverses the order on mobile
hideDesktopbooleanfalseHide this row on desktop
hideMobilebooleanfalseHide this row on mobile

Row _override.mobile properties​

PropertyTypeDescription
backgroundColorstringRow background color
columnsBackgroundColorstringContent area background
paddingstringRow padding (e.g. "10px")
borderBorderContent area border
borderRadiusstringContent area border radius
backgroundImageBackgroundImageRow background image

Column mobile overrides​

{
  "values": {
    "backgroundColor": "#ffffff",
    "padding": "20px",
    "_override": {
      "mobile": {
        "backgroundColor": "#f8f8f8",
        "padding": "10px"
      }
    }
  }
}
PropertyTypeDescription
backgroundColorstringColumn background color
paddingstringColumn padding
borderBorderColumn border
borderRadiusstringColumn border radius
backgroundImageBackgroundImageColumn background image

Content block overrides by tool​

Text / Paragraph / Heading​

{
  "type": "heading",
  "values": {
    "text": "<h1>Welcome</h1>",
    "fontSize": "36px",
    "lineHeight": "140%",
    "_override": {
      "mobile": {
        "fontSize": "24px",
        "lineHeight": "130%",
        "textAlign": "left",
        "letterSpacing": "normal"
      }
    }
  }
}
PropertyTypeDescription
fontSizestringFont size (e.g. "24px")
fontWeightstringFont weight (e.g. "700")
lineHeightstringLine height (e.g. "140%")
letterSpacingstringLetter spacing
colorstringText color
textAlignstring"left" | "center" | "right"
containerPaddingstringOuter padding around the block
linkStyleLinkStyleLink color, underline, hover styles

Button​

{
  "type": "button",
  "values": {
    "text": "Get Started",
    "fontSize": "16px",
    "padding": "12px 24px",
    "buttonColors": {
      "color": "#ffffff",
      "backgroundColor": "#1d4ed8"
    },
    "_override": {
      "mobile": {
        "fontSize": "14px",
        "padding": "10px 20px",
        "size": { "width": "100%", "autoWidth": false },
        "buttonAlign": "center"
      }
    }
  }
}
PropertyTypeDescription
fontSizestringButton text font size
fontWeightstringButton text font weight
lineHeightstringButton text line height
paddingstringButton inner padding
borderBorderButton border
borderRadiusstringButton border radius
size{ width, autoWidth }Button width. Set autoWidth: false with width: "100%" for full-width mobile buttons
buttonAlignstringButton alignment
textAlignstringButton text alignment
buttonColors.colorstringButton text color
buttonColors.backgroundColorstringButton background color
buttonColors.hoverColorstringHover text color
buttonColors.hoverBackgroundColorstringHover background color
containerPaddingstringOuter padding

Image​

{
  "type": "image",
  "values": {
    "src": { "url": "https://example.com/hero.png", "width": 600 },
    "_override": {
      "mobile": {
        "size": { "width": "100%", "autoWidth": false }
      }
    }
  }
}
PropertyTypeDescription
size{ width, autoWidth }Image size on mobile
containerPaddingstringOuter padding

Divider​

PropertyTypeDescription
widthstringDivider width (e.g. "80%")
borderBorderDivider line style, width, and color
containerPaddingstringOuter padding

Spacer​

{
  "type": "spacer",
  "values": {
    "height": "40px",
    "_override": {
      "mobile": {
        "height": "20px"
      }
    }
  }
}
PropertyTypeDescription
heightstringSpacer height on mobile
PropertyTypeDescription
alignstringMenu alignment
layoutstring"horizontal" or "vertical". Switch to vertical on mobile for better tap targets
containerPaddingstringOuter padding

Social Icons​

PropertyTypeDescription
alignstringIcon alignment
spacingnumberSpacing between icons (px)
iconSizenumberIcon size (px)
containerPaddingstringOuter padding

Table​

Tables have an extended set of mobile overrides for header and content cells:

PropertyTypeDescription
headerBackgroundColorstringHeader row background
headerColorstringHeader text color
headerFontSizestringHeader font size
headerFontWeightnumberHeader font weight
headerTextAlignstringHeader text alignment
contentFontSizestringCell font size
contentFontWeightnumberCell font weight
contentColorstringCell text color
contentTextAlignstringCell text alignment
contentLineHeightstringCell line height
contentLetterSpacingstringCell letter spacing
backgroundColorstringTable background
containerPaddingstringOuter padding

Setting overrides via SDK​

You can load a design with mobile overrides already set, or let users configure them in the editor's mobile view mode.

// Load a design with mobile overrides pre-configured
const design = {
  body: {
    rows: [{
      cells: [1],
      values: {
        noStackMobile: false,
        hideDesktop: false,
        hideMobile: false,
      },
      columns: [{
        values: { padding: '20px' },
        contents: [{
          type: 'heading',
          values: {
            text: '<h1>Hello</h1>',
            fontSize: '36px',
            _override: {
              mobile: {
                fontSize: '22px',
                containerPadding: '10px',
              },
            },
          },
        }],
      }],
    }],
  },
};

editorRef.current?.editor?.loadDesign(design);
Mobile breakpoint

Mobile overrides apply at 480px and below. This breakpoint is standard for email clients and matches how most email rendering engines handle responsive layouts.

warning

Mobile overrides only take effect when the responsiveDesign feature is enabled in your plan and configuration. Without it, the editor shows only the desktop view and mobile overrides in the JSON are ignored during editing (but still rendered in exported HTML).

Next steps​

  • Configure Tools -- enable, disable, and set default values for tools
  • Design JSON -- full design JSON structure reference
  • Export HTML -- mobile overrides are included in the responsive HTML output