Scrivito offers three device preview groups, “Mobile”, “Tablet” and “Desktop”. They enable editors to see how the website would look on devices with smaller screens. Each device preview group can have optional custom preview sizes.
Defines custom preview sizes for use in Scrivito’s editing interface.
Scrivito offers three device preview groups, “Mobile”, “Tablet” and “Desktop”. They enable editors to see how the website would look on devices with smaller screens. Each device preview group can have optional custom preview sizes.
[New in 1.58.0]You can define specific preview sizes that are automatically organized into the three device preview groups based on their width and the configured responsiveBreakpoints.
The device preview groups (“Mobile”, “Tablet”, “Desktop”) are always available, regardless of how many custom preview sizes you’ve configured. If a group has no custom sizes assigned to it, it automatically uses its default width from responsiveBreakpoints.
Params
previewSizes (Array) – the preview sizes to provide. Each array element is expected to be an object containing the following:title (String) – the title of the preview size. width (Number) – the width of the preview size in pixels (optional). If not specified, the full width is used.description (String) – the description of the preview size (optional).Throws
An error is thrown if
previewSizes array is empty,width specified as a positive integer.Example
Preview sizes grouping
Preview sizes are assigned to groups based on their width and the responsive breakpoints configuration properties, mobileMaxWidth and tabletMaxWidth:
Mobile group: Width ≤ mobileMaxWidth (default: 767px)
Tablet group: mobileMaxWidth < width ≤ tabletMaxWidth (default: 991px)
Desktop group: width > tabletMaxWidth or width: null
The “Desktop” group
The “Desktop” group always includes a width: null option (full available viewport width), automatically added alongside any custom desktop preview sizes:
If you explicitly define a preview size with width: null, the custom size will be used instead of the automatically added one:
This ensures that editors can always preview content at full viewport width, even if custom fixed-width desktop preview sizes have been configured.
Custom breakpoints to match a CSS framework
By default, responsiveBreakpoints is configured to align with Bootstrap 5. This results in the following breakpoints:
Mobile: ≤ 767px (below Bootstrap md breakpoint)
Tablet: 768px - 991px (Bootstrap md breakpoint range)
Desktop: ≥ 992px (Bootstrap lg and above)
However, you can customize the breakpoints to match your CSS framework. For example, with Tailwind CSS, configure the breakpoints to align with Tailwind md (768px) and lg (1024px) breakpoints:
This maps the three viewports to the Tailwind breakpoint system:
Mobile: Viewport width ≤ 767px (below Tailwind md: breakpoint)
Tablet: 768px - 1023px (Tailwind md: to lg: range)
Desktop: Viewport width ≥ 1024px (Tailwind lg: and above)
Similarly, for Material Design breakpoints, configure the widths to align with Material’s compact, medium, and expanded window size classes:
This maps the three viewports to the Material Design breakpoint system:
Mobile: Viewport width ≤ 599px (Material compact window size)
Tablet: 600px - 839px (Material medium window size)
Desktop: Viewport width ≥ 840px (Material expanded window size)