Today we going into the details of Sitecore pages and devices for different breakpoints. In the past we have already seen three pre-defined breakpoints you could use.
With the newest update of Sitecore Pages on May 22, 2023 we are able to change existing or define new devices (breakpoints)!
Lets start to configure a new device!
First of all we have to navigate to the devices root folder defined in the content tree /sitecore/system/Settings/Foundation/Experience Accelerator/Horizon/Devices
At this location you can find all defined devices. By default there are already 9 devices defined.
If you click on the Devices item you are able to create a new device.
You can give the device a name for example "Desktop - Xtra Large". The name will be displayed on mouse hover and in the dropdown if you want to select the device later in Pages.
The second field is the "Device width" to define the width of the page if you select this device.
To prevent a very large Site page toolbar of different devices in Pages you are able to define if a device should always directly available or if it should be shown in a dropdown. (You can also disable a specific device if you dont want so show it).
Available Options:
- Empty = Same as fixed
- Optional = Show the device in the dropdown until you select it with the option to hide it afterwards through a checkbox
- Fixed = Always show the device
- Disabled = Hides the device completely
The last thing we can configure is the Icon which will be shown in the Site page toolbar.
Either you change the icon from the item itself or you can use the field "Icon" to pick an image from the image library.
Attention: If you choose to take an icon from the media library ensure that the icon size is 24x24 otherwise your icon will break out of the layout - Resizing through the properties pane currently does not work.
All devices in Pages are sorted based on the field "Device width".
Last but not least, if you want to define the device as the default device, you can go back to the root item of "Devices" and select your device on the field "Default".
An example for the device "Custom - Desktop Xtra Large" with width set to 2000 and an icon chosen on the item directly (not the field).
Fixed
Optional
I hope this helps you to work better with your custom breakpoints in your solution!