Responsive web design

What’s a breakpoint?

What can change across breakpoints and what can’t?

Switching between breakpoints

How can I configure breakpoints?

Managing breakpoints

Breakpoints presets

Main breakpoint

Responsive web design

The flexibility of designing for the web comes at the cost of having to keep (literally) billions of device screen sizes in mind. While you don’t have to design for each and every screen individually, it’s important to understand how Vev handles breakpoints so that your content looks stunning on as many devices as possible.

This is a critical feature because you may design a fantastic-looking layout for a web page when viewed on a desktop device, but that same design simply starts to fall apart as the screen size gets smaller.

In visual terms, here’s what happens when you don’t utilize breakpoints...

… and here’s what happens when you do!

What is a breakpoint?

A breakpoint is a particular “point” in the width of your design where content needs to adapt to certain screen sizes.

What can change across breakpoints and what can’t?

Short answer: Styling rules and transformation settings (size, position, and rotation) can change. Actual content can’t.

Long answer: Between Desktop Layout and Tablet Layout, you can change the size, position, rotation, color, padding, border, border-radius, visibility, etc. of a text box, but you can’t change the actual text inside it.

Now, someone clever may think of some tricks to show or hide two text boxes, each containing different text, which gives the illusion of content changing for the same text box, but you get the point. In fact, that’s a handy trick you are free to use, but just make sure you don’t show/hide heavy content (e.g. big images, videos, some fancy elements) as that can affect page load performance.

Switching between breakpoints

You can switch between breakpoints in your project using the breakpoints menu located in the lower-left corner of the editor, below the content panel. This allows you to see how your content will look on different device widths, showing where you should make adjustments to give the best user experience.

Managing breakpoints

(Note: Managing breakpoints is restricted to Designer and Admin users.)

You can find the project settings panel on the right side of the editor by pressing “ESC” or by clicking outside the canvas. Alternatively, you can manage your breakpoints by opening the breakpoints menu and clicking “Manage breakpoints”. In this panel, you will be able to add, edit, or delete breakpoints.

To add breakpoints, open the breakpoints title's overflow menu to the right. You can edit or delete breakpoints by clicking the "edit" icon to open its settings.

How can I configure breakpoints?

You can configure breakpoints for your projects in two ways: either by inheriting styles across breakpoints or not inheriting them. Let's find out about the differences between these.

(Note: If you’re not sure which option to choose, we recommend that you use inheriting styles across breakpoints.)

1. Inheriting styles across breakpoints (toggle on)

When you define styles on the Desktop-first breakpoint (1440px900px), they cascade down to tablet and mobile device sizes or up to devices larger than the default desktop breakpoint. In addition, all styles defined on the tablet are also passed down to the mobile breakpoints. The same would apply in the opposite fashion if you choose a Mobile-first breakpoint.

2. Not inheriting styles across breakpoints (toggle off)

By keeping the toggle off, only style adjustments made in the main breakpoint will be inherited across sizes. Therefore, if you make any styling alterations in Tablet, those won't be inherited for the smaller breakpoints (e.g. mobile).

Breakpoint presets

A preset is composed of one or more individual breakpoint settings, and you can only apply one preset to a project. We provide three default presets:

  • Desktop (main), tablet, and mobile

  • Desktop, tablet (main), and mobile

  • Desktop, tablet, and mobile (main)

This allows you to choose the main breakpoint for your project. You can also save custom breakpoints and use them on future projects (available only on Professional and Organization plans).

(Note: a Starter plan user will always be able to modify the default presets inside the editor, but will not be able to save them as a preset).

Save breakpoints as a preset

(Note: Professional and Organization plan feature)

Saving breakpoint settings lets you and other users on the same account start off projects with a preset breakpoint setting. This is how you save a breakpoint preset:

  • Select "Save as breakpoint preset" from the breakpoints title's overflow menu, or open the project menu in the top-left corner, head to "File" and select "Save breakpoint preset".

  • This opens a Save modal with an overview of breakpoints which will be saved

  • Give your preset a name

  • Hit the "Save preset" button

Now, these breakpoint settings will be saved as a breakpoint preset which you can select as a starting point next time when creating a blank project.

Main breakpoint

When you select a main breakpoint, you're creating a starting point for your design, which means that any styling adjustments will be applied across breakpoints, with one caveat: whether you choose to inherit styles across breakpoints or not.

Let’s say you have Desktop, Tablet, and Mobile Layouts, and Desktop is set as the main breakpoint. You have a text box with the default color of black. This is how the text color will be:

In a Desktop-first breakpoint, changing the color from black to blue will apply those changes to all other breakpoints.

If you alter the color from blue to green on the Tablet breakpoint, the change will be inherited across breakpoints for both the Tablet and Mobile, but only the Tablet if you don’t inherit styles.

Now, if you go back to the Desktop breakpoint and change the color to red, it’ll only affect Desktop and Mobile, but Tablet will not be affected as it has local rules for both methods.

Related Articles:

Auto Layout

Sizing Components

Spacing Options

Using Constraints

Understanding the Safe Zone

Did this answer your question?