Adding Media-query breakpoints

If your theme is responsive (uses CSS media-queries), it should expose those media-query breakpoints so the Veva page editor knows about them. Veva will then display buttons for each breakpoint above the page editor, so the user can view (and edit) the pages in all the different device widths that the theme supports.

This is easy to do. Open up your Theme configuration file (Theme.cs) and have the MediaQueryBreakpoints property return info about your breakpoints. Here's an example taken from a Bootstrap 4 based theme which lists all the standard Bootstrap media-query breakpoints:

public IEnumerable MediaQueryBreakpoints
{
get
{
var breakpoints = new List();

	breakpoints.Add(new MediaQueryBreakpoint() { Width = null, Description = "Desktop, full width", IconName = "desktop_windows" });
	breakpoints.Add(new MediaQueryBreakpoint() { Width = 1200, Description = "Extra large", IconName = "laptop" });
	breakpoints.Add(new MediaQueryBreakpoint() { Width = 992, Description = "Large", IconName = "tablet_mac" });
	breakpoints.Add(new MediaQueryBreakpoint() { Width = 768, Description = "Medium - Landscape", IconName = "stay_primary_landscape" });
	breakpoints.Add(new MediaQueryBreakpoint() { Width = 576, Description = "Small", IconName = "stay_primary_portrait" });
	breakpoints.Add(new MediaQueryBreakpoint() { Width = 320, Description = "Extra small", IconName = "stay_primary_portrait" });

	return breakpoints;
}

}

Notice the first breakpoint with a Width of null. When providing breakpoints, always make sure to include one with a null width, since that will allow the user to return back to full-width mode (Desktop mode).

Now run your project and log in to the Veva backend. You should now see the various buttons appear above the page editor, which will set the width of the page editor according to each breakpoint size:

In this screenshot, one of the buttons has been clicked and the page editor has been resized accordingly.

CSS component modifiers

These breakpoints offer additional functionality. When users apply CSS based component modifiers to content components, the user can easily select the screen/device widths the component modifier will be activated on.
There's more information about component modifiers in the user manual section.

Table of contents

Adding Media-query breakpoints

CSS component modifiers