Mobile Settings

Responsive styling using media queries in the selectors object.

Overview

CF2 uses @media (max-width: 770px) selectors to define mobile-specific styles. These are nested inside the element's selectors object.

JSON

{
  "type": "SectionContainer/V1",
  "selectors": {
    "@media (max-width: 770px)": {
      "params": {
        "margin-top--unit": "px",
        "padding-top--unit": "px",
        "padding-bottom--unit": "px",
        "--style-padding-horizontal": 25,
        "--style-padding-horizontal--unit": "px"
      },
      "attrs": {
        "style": {
          "margin-top": 5,
          "padding-top": 30,
          "padding-bottom": 26
        }
      }
    }
  }
}

Breakpoint

CF2 uses a single breakpoint:

Mobile breakpoint: max-width: 770px

Common Patterns

Adjusting Padding

JSON

{
  "selectors": {
    "@media (max-width: 770px)": {
      "params": {
        "--style-padding-horizontal": 15,
        "--style-padding-horizontal--unit": "px",
        "padding-top--unit": "px",
        "padding-bottom--unit": "px"
      },
      "attrs": {
        "style": {
          "padding-top": 20,
          "padding-bottom": 20
        }
      }
    }
  }
}

Changing Font Sizes

JSON

{
  "type": "Headline/V1",
  "selectors": {
    ".elHeadline": {
      "attrs": {
        "style": { "font-size": 48 }
      },
      "params": { "font-size--unit": "px" }
    },
    "@media (max-width: 770px)": {
      "selectors": {
        ".elHeadline": {
          "attrs": {
            "style": { "font-size": 28 }
          },
          "params": { "font-size--unit": "px" }
        }
      }
    }
  }
}

Full-width Button on Mobile

JSON

{
  "type": "Button/V1",
  "selectors": {
    "@media (max-width: 770px)": {
      "params": {
        "margin-top--unit": "px"
      },
      "attrs": {
        "style": { "margin-top": 25 }
      },
      "selectors": {
        ".elButton": {
          "params": {
            "width--unit": "%",
            "--style-padding-vertical": 20,
            "--style-padding-vertical--unit": "px"
          },
          "attrs": {
            "style": { "width": 100 }
          }
        }
      }
    }
  }
}

Mobile Icon Size

JSON

{
  "type": "Icon/V1",
  "selectors": {
    ".fa_icon": {
      "attrs": {
        "style": { "font-size": 80 }
      }
    },
    "@media (max-width: 770px)": {
      "selectors": {
        ".fa_icon": {
          "params": { "font-size--unit": "px" },
          "attrs": {
            "style": { "font-size": 48 }
          }
        }
      }
    }
  }
}

Show/Hide on Device

Use data-show-only to show elements only on specific devices:

JSON

{
  "type": "SectionContainer/V1",
  "attrs": {
    "data-show-only": "desktop"
  }
}

Value	Visibility
`desktop`	Show only on desktop
`mobile`	Show only on mobile
(omit)	Show on both

FlexContainer Mobile

Change flex direction and layout on mobile:

JSON

{
  "type": "FlexContainer/V1",
  "attrs": {
    "className": "elFlexWrap elFlexWrapMobile",
    "style": {
      "flex-direction": "row"
    }
  },
  "selectors": {
    "@media (max-width: 770px)": {
      "attrs": {
        "style": {
          "flex-direction": "column",
          "gap": 0.5
        }
      },
      "params": {
        "gap--unit": "em"
      }
    }
  }
}