Simulate Media Query in Framer X

Make elements hidden or show for certain device breakpoints

In CSS, media query is a common pattern to set element style behavior when building for responsive design. Below is an example in CSS to set the body background color to red when the screen width is below 600px width.

@media only screen and (max-width: 600px) {
  body {
    background-color: red;
  }
}

When we create responsive designs in Framer X, its adaptive layout feature allows us to set scaling behavior for each element so the design responds according to the frame size it’s contained in. While the layout feature is powerful, it does not yet have an option for you to control the behavior of elements specific to certain breakpoints directly in the design panel. To set rules based on breakpoints, you will need to turn to the code override feature or building out a code component.

Simulate media query with code overrides

Given that you can override the style of an element with code overrides. If you can detect the size of the viewport, then you can set the visibility of the elements to none. Below is an example to

export const HiddenBelowViewport768: Override = () => {
   const viewPortWidth = window.innerWidth;
   if (viewPortWidth < 768) {
      return {
        opacity: 0
      }
   }
}

A media query code component

Another approach is to create a component with media query properties that allows us to set the breakpoint range and connect to a content frame.

Example of setting the breakpoint in the properties panel using code component

Below is the code for the component:

import * as React from "react";
import { PropertyControls, ControlType } from "framer";
type Props = { viewPortMin: number, viewPortMax: number };

export class BreakPointFrame extends React.Component<Props> {
render() {
   const viewPortSize = window.innerWidth;
   if (viewPortSize > this.props.viewPortMin && viewPortSize <    this.props.viewPortMax) {
   return <div style={style}>{this.props.children}</div>;
   } else {
      return null
   }
}
static defaultProps: Props = {
   viewPortMin: 320,
   viewPortMax: 1200
};
static propertyControls: PropertyControls<Props> = {
   viewPortMin: { type: ControlType.Number, title: "Min Point" },
   viewPortMax: { type: ControlType.Number, title: "Max Point" }
};
}
const style: React.CSSProperties = {
   display: "block",
   background: "rgba(136, 85, 255, 0.1)",
};

Here is the link to the published component if you want to install and use. https://store.framer.com/package/pchen/breakpoint-frame

Going further

The next level approach is to actually use media query in the code component’s CSS definition. It’s possible to build out a more advanced settings menu to set the media query or you can also edit the behaviors in the code component edit more directly.

Feel free to comment if you have a better approach to creating a responsive design pattern like the media query within Framer X.