Skip to main content
All CollectionsThe Design Editor
Understanding Breakpoints
Understanding Breakpoints

Learn how to effectively use breakpoints in Vev to build responsive designs that adapt seamlessly to different screen sizes

Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

With the flexibility of web design comes the challenge of ensuring your content looks great on all devices, from large desktop monitors to small mobile screens. This guide will help you understand how to use breakpoints in Vev—including the new Fluid Breakpoints feature—to make your designs adapt seamlessly to any screen size.

Introduction to Responsive Web Design

In today's multi-device world, your website must look and function beautifully on a variety of screen sizes. Responsive web design allows your content to adjust smoothly to different viewport widths, ensuring a consistent user experience.

Vev provides powerful tools to help you create responsive designs, including Fixed and Fluid breakpoints. By understanding and effectively using these tools, you can ensure your content looks stunning on any device.


What Are Breakpoints?

A breakpoint is a specific screen width at which your design adjusts to provide the best possible layout for that screen size. In Vev, breakpoints allow you to define how your design responds to different viewport widths, ensuring that your content is optimized for various devices.

For example, you might have:

  • Desktop Breakpoint at 1440px

  • Tablet Breakpoint at 1024px

  • Mobile Breakpoint at 768px

At each breakpoint, you can adjust the styling and layout of your content to suit that screen size.


Fixed vs. Fluid Breakpoints

Fixed Breakpoints

With fixed breakpoints, your design adjusts abruptly at specific screen widths. When the viewport reaches a breakpoint, the layout changes to the styles defined for that breakpoint. In Vev the breakpoints are defined what we call the Safe Zone, meaning the content should ideally live within the size of the breakpoint width. If you turn on guides in the Project Settings this will become apparent.

When content is set to 100% of a fixed breakpoint's width, it doesn't adjust fluidly to the screen size, leading to empty columns on the sides as you see when guides are turned on.

Fixed Breakpoint example:

  • At 1024px (tablet breakpoint), your design switches from the desktop layout to the tablet layout.

  • This approach is useful when you want distinct layouts for different device categories.

Fluid Breakpoints

Fluid Breakpoints allow your design to scale smoothly between screen sizes within a breakpoint range. Instead of abrupt changes, your content resizes proportionally as the screen width changes. With fluid breakpoints you can design with the full width of the canvas and you will not be restricted to the Safe Zone.

  • Seamless scaling: Elements adjust fluidly, maintaining consistent proportions and spacing.

  • Better user experience: Eliminates sudden layout shifts, providing a smoother transition.

When content is set to 100% of a fluid breakpoint's width, it adjusts fluidly to the screen size allowing you to use the whole width of the screen.

Fluid Breakpoint example:

  • Between the desktop and tablet breakpoints, your design scales fluidly without sudden changes.

  • Below you can see what happens when you go from fixed to fluid breakpoints on tablet. Desktop has already fluid breakpoints set in this example.

Note: You can still use fixed breakpoints where necessary, but fluid breakpoints offer a more seamless responsive experience.


Managing Breakpoints

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

Effective management of breakpoints is essential for creating responsive designs. Here's how you can manage breakpoints in Vev.

Breakpoint Presets

Whenever you start a new blank project, you'll begin by selecting from a few breakpoint presets to help you get started:

  • Desktop (main), Tablet, and Mobile

  • Desktop, Tablet (main), and Mobile

  • Desktop, Tablet, and Mobile (main)

The breakpoint tagged as main, visualized with a star icon, serves as the primary design. This is the view where all other breakpoints inherit their content and styles from. Whatever you do on the main breakpoint will automatically be applied to the other breakpoints. This inheritance continues until you make individual changes to the other breakpoints. Once you modify a style in a non-main breakpoint, that style becomes detached from the main breakpoint and won't be affected by further changes in the main breakpoint.

Style Indicators

A yellow dot 🟡 next to a style property indicates that it has been modified in that breakpoint and differs from the main breakpoint. This helps you keep track of where changes are coming from—the main breakpoint or the individual breakpoint. Read more about how to use style indicators.

What Can Change Across Breakpoints

Styling and Layout Adjustments

Across different breakpoints—whether fixed or fluid—you can change:

  • Size: Adjust widths and heights of elements.

  • Position: Move elements to different locations on the canvas.

  • Rotation: Rotate elements as needed.

  • Styling: Modify colors, fonts, borders, shadows, and other style properties.

  • Visibility: Show or hide elements on specific breakpoints.

    • Example:

      • On desktop you would want to use a Standard Menu, which you want to hide on tablet and mobile as you want to use a Burger Menu there instead. Therefor you would need to add both menus, but toggle visibility on the respective breakpoint you need it.

      • You might change a multi-column layout on desktop to a single-column layout on mobile.

Content Consistency

The actual content within elements (text, images) is consistent across breakpoints. If different content is needed, duplicate the element with the new content and adjust its visibility for specific breakpoints.

Caution: Avoid hiding large media files, as they still load and can impact performance.

Configuring Breakpoints

You can configure breakpoints for your projects in two ways:

  1. Inheriting styles across breakpoints (Toggle On)

  2. Not inheriting styles across breakpoints (Toggle Off)

Inheriting Styles Across Breakpoints (Toggle On)

When you define styles on the main breakpoint, they cascade down to smaller breakpoints or up to larger ones. For example, in a Desktop-first design (Desktop is the main breakpoint):

  • Styles defined on the Desktop breakpoint will be inherited by the Tablet and Mobile breakpoints.

  • If you change a style on the Tablet breakpoint, it will cascade down to the Mobile breakpoint but not affect the Desktop breakpoint.

  • This ensures consistency and reduces the amount of styling you need to do.

The same principle applies if you choose a Mobile-first breakpoint—the styles cascade upward to larger breakpoints.

Recommendation: If you're not sure which option to choose, we recommend using inheriting styles across breakpoints for a more streamlined workflow.

Not Inheriting Styles Across Breakpoints (Toggle Off)

By keeping the inheritance toggle off, only style adjustments made in the main breakpoint will be inherited across sizes. Any styling changes made in other breakpoints won't affect or be affected by other breakpoints.

  • Example: If you make styling alterations in the Tablet breakpoint, those changes won't be inherited by the Mobile breakpoint.

  • This gives you more control but requires more effort to maintain consistency.

Switching Between Breakpoints

To preview and edit your design at different breakpoints:

  1. In the lower-right corner of the Editor, you'll find the Breakpoint menu displaying the current breakpoint (e.g., Desktop).

  2. Click on the menu to see all available breakpoints.

  3. Click on the breakpoint you want to work on (e.g., Tablet, Mobile).

  4. The canvas updates to show your design at that screen width. You can now make adjustments specific to this breakpoint.

Alternatively you can switch between breakpoints by dragging the canvas in and out and you will see in the upper left corner of the canvas which breakpoint you are currently viewing and you can drag to change breakpoints. Additionally you can use shortcuts 1, 2, 3 on your keyboard to change between the breakpoints.

Custom Breakpoints

Available on Professional and Organization plans

You can also save custom breakpoint presets if you have specific needs that goes beyond the default presets Vev provides.

  1. In the breakpoint manager, select Save as breakpoint preset.

  2. Enter a descriptive name for your preset.

  3. Click Save Preset.

When creating new projects from blank, you now have this new preset listed under "Saved breakpoint presets" that you can start off from.

Adding and Editing Breakpoints

Adding a Breakpoint

  1. Click on Manage breakpoints in the breakpoint menu in the bottom right-corner of the canvas in the Editor. This will take you to the Breakpoint settings within the Project settings in the left sidebar.

  2. Click on the three vertical dots to open the settings.

  3. Click Add custom breakpoint.

  4. This will add another breakpoint to the list. Enter the desired width in pixels.

  5. Confirm by clicking the Checked ☑️ button.

  6. Hover the new breakpoint and click the edit icon ✏️ to open the breakpoint properties.

    1. Breakpoint Properties:

      • Give your breakpoint a descriptive name.

      • Enter the desired width in pixels.

      • Content Width

        • Fixed: Content width remains constant.

        • Fluid: Content scales proportionally with the viewport.

Editing or Deleting a Breakpoint

  1. Open Breakpoint Manager from the Project settings.

  2. Click the edit icon ✏️ next to the breakpoint you want to edit.

Breakpoint settings options:

  • Adjust the name, width, or content width type.

  • To remove the breakpoint, click Delete.


Using Fluid Breakpoints

Enabling Fluid Breakpoints

To enable a fluid breakpoint:

  1. Open Breakpoint Manager from the Project settings.

  2. Click the edit icon ✏️ next to the breakpoint you want to edit.

  3. Set Content Width to Fluid

Example:

  • Enabling fluid breakpoints for the Desktop and Tablet view allows your content to scale smoothly between the Desktop and Mobile widths within the breakpoint range.

Positioning and Sizing Content on the Canvas

When working with fluid breakpoints, it's crucial to consider how you position and size your content. Understanding when to use pixels (px) and percentages (%) is key to creating a responsive and fluid design. Here's what you need to know:

Understanding Units: Pixels vs. Percentages

Use % (Percentages) when

  • Positioning elements relative to the viewport or container

    • Example: Positioning an element at 25% from the top aligns it a quarter of the way down the screen.

  • Sizing elements to scale with the screen

    • Example: Setting a sidebar's width to 20% ensures it occupies 20% of the screen width on any device.

  • Maintaining proportional padding and margins

    • Example: Applying padding: 2% keeps padding proportional as elements resize.

Use px (Pixels) when

  • Keeping elements at fixed dimensions

    • Example: Icons or logos that need to stay at 50px by 50px.

  • Ensuring precision for borders and shadows

    • Example: A 1px border remains sharp and consistent across devices.

  • Setting consistent text sizes

    • Example: Setting font-size: 16px ensures readability across different screens.


Sizing Elements

Using Percentages for Width and Height

  • Width: Use % for widths to allow elements to scale fluidly with the screen.

  • Height: Set heights to auto to maintain aspect ratios, especially for images and text blocks.

  • Examples:

    • An image with width: 80% will adjust its size as the screen width changes.

    • A text block with width: 100% and height: auto will reflow text appropriately on different screen sizes.

Using Pixels for Fixed Dimensions

  • When to Use: Apply pixel (px) values for elements that need to maintain a specific size, regardless of screen size.

  • Examples:

    • A button that should always be 200px wide.

    • An icon that needs to stay at 50px by 50px.


Using Frames

Responsive Frames

  • Purpose: Wrapping content inside frames (containers) set to % widths helps group elements and control their collective responsiveness.

  • Example:

    • Place several buttons inside a frame with width: 100%. As the screen size changes, the frame and buttons adjust proportionally, maintaining their layout.

Positioning and Sizing Elements

Absolute Positioning with Pixels

  • When to Use:

    • For elements that need to maintain a fixed distance from a specific side of the viewport, regardless of screen size.

  • Example:

    • A logo that should always be 20px from the top and left edges.

      • Set x: 20px, y: 20px.

      • Ensure the element is constrained to the top-left corner.

Relative Positioning with Percentages

  • When to Use:

    • For elements that should adjust their position proportionally as the screen size changes.

  • Example: To position an element 20% from the left and 30% from the top of the screen:

    • Set the x coordinate to 20%.

    • Set the y coordinate to 30%.

    This ensures the element always stays 20% from the left edge and 30% from the top edge of the screen, maintaining its relative position as the screen size changes.


When to Use % vs. px Values

Use % (Percentages) When:

  • Positioning:

    • To position elements relative to the container or viewport size.

    • Example: left: 25% positions an element a quarter way from the left edge.

  • Sizing Elements:

    • Allows elements to scale with the screen.

    • Example: width: 50% makes the element half the width of its container.

  • Responsive Spacing:

    • For margins and padding that need to adjust proportionally.

    • Example: padding: 2% scales with the element's size.

Use px (Pixels) When:

  • Fixed-size elements:

    • For elements that should remain the same size across devices.

    • Example: Icons or buttons that need to stay at 40px by 40px.

  • Precise spacing:

    • When exact measurements are crucial.

    • Example: border: 1px ensures consistent border thickness.

  • Text size:

    • For consistent typography, though consider responsive units for better scalability.

    • Example: font-size: 16px provides a base size.


Best Practices for Fluid Design

Fluid design involves creating layouts that resize proportionally to the screen size. Here are some best practices:

  • Use relative units:

    • Percentages (%): Ideal for widths, heights, margins, and padding.

      • Example: width: 80% makes an element occupy 80% of the container's width.

    • Viewport units (vw, vh): Useful for font sizes and element dimensions relative to the viewport.

      • Example: font-size: 2vw adjusts the font size based on the viewport width.

  • Maintain aspect ratios:

    • For images and videos, set height: auto to preserve aspect ratios as widths change.

  • Test across devices:

    • Regularly preview your design at different screen widths to ensure it looks good on all devices.

    • Be aware of how everything looks at both the maximum and minimum widths of your breakpoints.

  • Use fixed breakpoints when necessary:

    • Even with fluid design, use fixed breakpoints to adjust layouts or styles for specific screen ranges.

    • This helps refine the design where fluid scaling alone isn't sufficient.

  • Avoid fixed widths in fluid breakpoints:

    • Try not to use fixed pixel values for widths and heights, as they don't scale with the viewport.

  • Responsive typography:

    • Use responsive units for font sizes to maintain readability.

      • Example: font-size: 1.5vw scales the text size with the viewport width.

Did this answer your question?