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.
Inheriting Styles Across Breakpoints
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.
Switching Between Breakpoints
To preview and edit your design at different breakpoints:
In the lower-right corner of the Editor, you'll find the Breakpoint menu displaying the current breakpoint (e.g., Desktop).
Click on the menu to see all available breakpoints.
Click on the breakpoint you want to work on (e.g., Tablet, Mobile).
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.
In the breakpoint manager, select Save as breakpoint preset.
Enter a descriptive name for your preset.
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
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.
Click on the three vertical dots to open the settings.
Click Add custom breakpoint.
This will add another breakpoint to the list. Enter the desired width in pixels.
Confirm by clicking the Checked ☑️ button.
Hover the new breakpoint and click the edit icon ✏️ to open the breakpoint properties.
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
Open Breakpoint Manager from the Project settings.
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:
Open Breakpoint Manager from the Project settings.
Click the edit icon ✏️ next to the breakpoint you want to edit.
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
widthto20%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
50pxby50px.
Ensuring precision for borders and shadows
Example: A
1pxborder remains sharp and consistent across devices.
Setting consistent text sizes
Example: Setting
font-size: 16pxensures 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
autoto 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%andheight: autowill 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
200pxwide.An icon that needs to stay at
50pxby50px.
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
xcoordinate to20%.Set the
ycoordinate to30%.
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
40pxby40px.
Precise spacing:
When exact measurements are crucial.
Example:
border: 1pxensures consistent border thickness.
Text size:
For consistent typography, though consider responsive units for better scalability.
Example:
font-size: 16pxprovides 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: 2vwadjusts the font size based on the viewport width.
Maintain aspect ratios:
For images and videos, set
height: autoto 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.5vwscales the text size with the viewport width.