Mastering Responsive Editing

In this video, we’re going to look at how responsive editing works in Nectarblocks. Responsive editing is what ensures your designs look great across desktop, tablet, and mobile — without having to build three separate versions of a page.

Let’s start with the basics. Inside the editor, you’ll notice device controls for desktop, tablet, and mobile. You can switch between these views at any time. This gives you a clear picture of how your layout adapts across breakpoints.

Now, the key to how this system works is what we call the waterfall model. Here’s how it works: Any styling change you make at the desktop level will flow down automatically to tablet and mobile. If you switch to tablet and adjust a setting, that change will apply to tablet and mobile only. And if you make a change in the mobile view, it only applies there.

This approach saves you a lot of time. Instead of manually adjusting everything at every breakpoint, you can focus on just the overrides that matter.

Let’s look at an example. If I set this heading to 36px on desktop, that size cascades down to tablet and mobile. On mobile though, 36px feels too large. So I’ll switch to the mobile view, change it to 24px, and that new size only affects mobile. Tablet and desktop stay untouched.

Let’s take a closer look at this section and see how we’ve adjusted it to display better on the tablet viewport. In this case, we’ve centered the heading and buttons for clarity, tightened the gap between the bottom columns, and set the featured column to display full width — while leaving the supporting columns in two.

By default, all columns will stack into a single column on mobile. But you can override that if needed by going into the row settings and switching the direction to horizontal. That restores the same column setup you used on desktop. If you’d rather break your layout into multiple rows, you can enable Flex Wrap. Once the total width of your columns exceeds 100%, they’ll wrap automatically to the next line. For this example, we’ve set the first two columns to 50%, which forces the third column to wrap onto a new row.

We’ve also added an arrow icon inside the full-width column at the bottom — but only for tablet. On wider and smaller devices, we’ve hidden it by setting its display to none. This way, it only appears where it makes the most sense.

As you can see, the responsive system is flexible enough to create unique layouts per device, without having to rebuild the entire section from scratch.

Now, when you’re making these kinds of changes, pay attention to the coloring of the block settings labels. If the label is green, that means the value is being inherited from a larger viewport. If the label is blue, that means the value has been overridden for the current viewport. And if there’s no colored label in a responsive view, that setting isn’t responsive. While most settings are responsive, not every control will be.

Whenever a setting is overridden in a smaller viewport — so the label shows blue — you’ll also see a reset button next to it. Clicking that resets the value back to inheriting from the parent viewport, which is really useful if you want to remove an override and go back to the cascading default.

One important detail: responsive values are only set when you’ve actually clicked one of the device icons at the top to enter that viewport. If you simply resize your browser window manually, you’re still editing the main desktop values. So always use the device toggles when you want to make true responsive adjustments.

So that’s the responsive editing workflow in Nectarblocks. With breakpoint controls, the waterfall system, color-coded labels, reset options, and flexible layout overrides, you’ll be able to keep your designs consistent and professional on every device size.