@breakpoint

Description

The @breakpoint layout query allows you to define specific widths to that will trigger specified CSS rules to apply to the ad's design.

Example Use: Outside of a Flowlane

When used outside of an @flowlane rule, an @breakpoint rule simply creates a max-width breakpoint at the defined pixel value.

CSS

.element {
	background-color: red; 
}

@breakpoint 1024 {
  .element {
    background-color: blue;
  }
}

Example Use: Inside of a Flowlane

When the @breakpoint layout query is used within a flowlane, the width of the breakpoint is not set at an explicit width, but rather it is set at the ratio of the defined width to the height of the flowlane. This allows the breakpoint position to "scale" with the flowlane. For example, a breakpoint set at 300 within a 50 px flowlane, will go into effect at a width of 600px when the flowlane renders at 2x size.

In essence, using a breakpoint within a flowlane creates a "max-aspect-ratio" breakpoint at an aspect ratio of breakpoint-width/flowlane-height.

CSS

.element {
	background-color: red; 
}

@flowlane 50 {
  .element {
    background-color: blue;
  }
  @breakpoint 300 {
    background-color: white;
  }
}