Designing for desktop, tablet, and mobile (Breakpoints & Zoom)

Every section and block in véltica is built to adapt automatically to different screen sizes. Even so, you can preview how your site looks on each device right in the editor and fine-tune styles specifically for tablet or mobile without affecting your desktop layout.

Switching views in the top bar: Desktop, iPad (Tablet), and Mobile

In the center of the top bar you’ll find the Viewport switcher with three views:

Desktop: the base design for desktop and laptop screens (1280 px reference width).
iPad (Tablet): the intermediate view for portrait tablets and compact screens (768 px).
Mobile (Phone): the view for mobile phones (390 px).

When you switch icons, the canvas resizes immediately so you can see how columns stack, how the mobile menu behaves, and how headings scale down.

How style cascading works

In véltica, styles cascade from larger screens down to smaller ones—following the same rule the web uses:

What you change on Desktop is the base: any size, spacing, alignment, or layout change you make in the Desktop view is automatically inherited by iPad and Mobile (unless those smaller screens already have their own override on that property).
What you adjust on iPad flows down to Mobile: if you change a property while viewing iPad, that change applies to tablets and is inherited by mobile phones, but does not touch your desktop design.
What you adjust on Mobile stays on Mobile: any change made in the Mobile view affects only phones.

Important: Your content (what a text says, which photo an image shows, or where a link points) is shared across all three devices. If you delete a sentence or swap a photo in the mobile view, it changes across the whole site. What changes per device is the design (sizes, columns, margins, alignment, or visibility).

Identifying and resetting a device-specific change (`Override at this breakpoint`)

When you are in the iPad or Mobile view and modify a property in the right-hand inspector (or in your brand’s text styles), véltica marks that property with an Override at this breakpoint indicator.

If you later want that property to go back to following the desktop view:

Select the element while in the iPad or Mobile view.
Hover over the indicator next to the modified property in the inspector.
Click Remove the override for this breakpoint. The element immediately goes back to inheriting the value from the larger screen.

Showing or hiding an element per device (`Show/Hide on...`)

Sometimes a decorative image or an extra column looks great on desktop but takes up too much room on a phone. Instead of deleting it—which would remove it from every device—you can hide it only on that screen:

Switch the top bar to the device view where you want to hide the element (for example, Mobile).
Right-click the element on the canvas (or open its actions in the Layers panel).
Choose Hide on mobile (or Hide on tablet / Hide on desktop).

When an element is hidden on the current device, it appears in the Layers panel with the Hidden on this device badge. From that same menu, you can click Show on mobile whenever you want to bring it back.

Controlling canvas zoom (Auto vs. Manual mode and pixel width)

In the Desktop view, to the right of the device icons, you’ll find the canvas scale and width controls:

Auto mode (Auto / Fit mode): automatically scales the zoom so the entire page always fits inside the space available between your side panels, with no horizontal scrollbars.
Manual mode (Manual): lets you pick a fixed zoom percentage or drag sideways to zoom in and out at will (Drag to zoom · click for more options).
Canvas width (px): drag the side handles of the canvas or pick a pixel width to test how your layout responds on wider monitors or smaller laptops before hitting the tablet breakpoint.

Editing your site directly from a phone or tablet

If you open the véltica editor from the browser on your own phone or iPad, the interface adapts automatically to touch screens:

The editor opens directly in Essential mode with a bottom and contextual toolbar designed for touch.
You can add sections, reorder them from Layers, double-tap text to edit it, upload photos from your camera roll, change brand colors, and hit Publish from anywhere.