{"title":"Defining Breakpoints","id":51990,"link":"https:\/\/env.averta.net\/en\/step\/defining-breakpoints\/","parent":[51847],"content":"<p>Breakpoints are a set of width sizes that let you make the slider more responsive. For example you can set how layers get position at each breakpoint or change the slider height, or show or hide layers and any other elements inside the slider.<\/p>\n<h2>Breakpoints object<\/h2>\n<p>This object contains all defined breakpoints in the slider. Each breakpoint defines as a pair of breakpoint name and width size in pixels. You can change the object by <code>breakpoints<\/code> slider option. The object default value is like below<\/p>\n<pre class=\"lang:xhtml decode:true \">  breakpoint = {\r\n     phone: 480,\r\n     tablet: 768\r\n  };\r\n<\/pre>\n<p class=\"aswi-text-box box-important\"><strong>Important: <\/strong>You can set any breakpoint name except <code>desktop<\/code> since it is reserved inside the slider core.<\/p>\n<h2>Relocate or hide layers<\/h2>\n<p>You are able relocate or hide layers at a breakpoint. For more information check out <a href=\"https:\/\/env.averta.net\/en\/step\/positioning-layers\/?b=51939,51939\" title=\"Positioning Layers\">Positioning layers<\/a> article.<\/p>\n<h2>Height control<\/h2>\n<p>To change the slider height at each breakpoint you can set multiple height value in slider option. For more information check out <a href=\"https:\/\/env.averta.net\/en\/step\/defining-breakpoints\/?b=,\" title=\"Defining Breakpoints\">Controlling slider height<\/a> article.<\/p>\n<h2>Narrow layout<\/h2>\n<p>When the narrow layout get activated, the slider moves all UI controls that were aligned to the right or left to top or bottom of the slider. You can set when slider switches to narrow layout by slider option. For example <code>narrowLayoutOn:'phone'<\/code>. It switches to narrow at <code>phone<\/code> breakpoint.<\/p>\n<h2>Breakpoints class names<\/h2>\n<p>Master Slider automatically adds the active breakpoint class name to the slider main element when slider resizes. The class name pattern is <code>ms-bp-[breakpoint name]<\/code>, for example <code>ms-bp-phone<\/code>. You can use this class names to add custom style to any element inside the slider at each breakpoint.<\/p>\n<h2>Sizing reference option<\/h2>\n<p>This option (<code>sizingReference<\/code>) lets you set how the slider finds the breakpoint, relative to the window size or the slider location in the page. Possible values are <code>window<\/code> and <code>view<\/code>.<\/p>\n","type":"solution"}