All help articles

Adding custom breakpoints

By default, Laska has 4 breakpoints preconfigured for every project:

  • Desktop (greater or equal than 1280px)
  • Tablet (greater or equal than 768px)
  • Phone (Landscape) (greater or equal than 568px)
  • Phone (Portrait) (greater or equal than 320px)

Sometimes it's useful to be able to edit these breakpoints. You may not have to support all of these devices, or perhaps there's an additional breakpoint you need to work with.

We can add custom breakpoints by changing a configuration file called .styledpage.config.yaml

First, if the file doesn't exist yet, create it. Then, add a section called customDevices, like this:

customDevices:
- name: base
  label: Wide
  width: 800
  icon: fas fa-desktop
- name: phone-portrait
  width: 400
  maxWidth: 799
  label: Small
  icon: fas fa-mobile

The customDevices field is an array of device definitions. Each device is defined using attributes such as name, label, icon and so on.

The first device must be called base. This serves as a base style upon which other media queries will build.

icon refers to a Font Awesome icon name.

width refers to the minimum width from which the device will be active.

maxWidth means the maximum width for which the device will stay active. For each definition, Laska creates a CSS media query. This media query is created whenever you update a style property like color or height, and a non-base device is selected. Such a media query looks like this:

@media (max-width: <MAX_WIDTH>) {

}

If you now go back to the editor, you'll notice that the default breakpoints have changed. We can now use these new breakpoints.

Note that any existing media queries will not be changed. Be sure to update your media queries manually if you decide to change your breakpoints in the middle of development.