Fastr Workspace - Keeping Text or Groups at a Fixed Size

Overview

This article walks through how to stop an element from scaling in a published Experience, so it stays at one consistent size across every screen width. By default, everything on the Experience Canvas scales up and down together to fit the visitor's screen — but sometimes you have an element, like a headline, a price, or a call-to-action (CTA) button, that you'd rather keep at a fixed, predictable size. Fastr gives you two ways to do this: locking font size for text, and Fixed size for groups and masks.

Before you start, you'll need an Experience with the text or widgets you want to fix already placed on the canvas. For a refresher on the canvas, see Fastr Frontend Experience Canvas: Overview.

Why Fix an Element's Size

When a published Experience scales, every widget scales proportionally with it. That keeps your proportions intact, but it also means a button can become too small to tap on a narrow screen, or a label can shrink until it's hard to read. Fixing an element's size keeps it clear, consistent, and on-brand everywhere it appears — ideal for:

• Buttons and CTAs that should stay a comfortable, tappable size on every device
• Headlines, prices, badges, or labels that shouldn't shrink to the point of being hard to read
• Any element where a consistent size matters more than scaling with the layout

Keeping Text at a Fixed Size

For a text widget, you can stop the font size from scaling, so your copy stays crisp and legible at every screen width while the rest of the layout continues to respond as normal.

1. Select the text widget on the canvas.
2. In the options panel on the right-hand side, turn on the lock font size option.
   
3. Your text will now hold its size no matter how the Experience scales around it.

Keeping a Group or Mask at a Fixed Size

Sometimes you want a whole element — like a styled button with its background, border, and label — to stay exactly one size, not just the text inside it. That's what Fixed size does. With it enabled, the element keeps its exact pixel dimensions and position at every screen width, while everything else in your Experience scales around it.

Fixed size works on both groups and masks. You can lock a standard group of widgets, and you can lock a masked group too — a masked element keeps its fixed size while still respecting its mask, so the clipping stays intact as the Experience scales.

1. On the canvas, select the widgets you want to keep at a fixed size and group them (or select your existing group or masked group). You can lock a single widget by grouping it on its own.
2. With the group or mask selected, open the options panel on the right-hand side.
3. Toggle on Fixed size.
   
4. The element will now hold its size and position wherever the Experience is displayed.

Note: You can toggle either option back off at any time to return the element to normal scaling.

Good to Know

Leave a little breathing room. Because a fixed-size element doesn't shrink with the rest of the Experience, at very narrow screen widths it keeps its full size and can end up close to — or overlapping — neighboring content. Give it some space in your layout so it always sits comfortably.

Works alongside Variants. You can still design different Breakpoint Variants for different screen sizes — fixing an element's size simply controls scaling within whichever Variant is showing.

FAQs

1. What's the difference between locking font size and Fixed size?
   • Answer: Locking font size keeps only the text from scaling, while the widget's box still responds with the layout. Fixed size, applied to a group or mask, keeps the entire element's pixel size and position fixed. Use lock font size for legibility of text; use Fixed size when you want a whole element — like a button — to stay one size.
2. Can I use Fixed size on a masked group?
   • Answer: Yes. Fixed size works on both groups and masks. When you lock a masked group, it keeps its fixed size and its mask at the same time, so the content stays clipped as designed while the rest of the Experience scales.
3. Can I fix the size of a single widget?
   • Answer: Yes — group it first, then enable Fixed size on the group. Fixed size is a group- and mask-level option, but a group can contain just one widget.
4. What happens to a fixed-size element on very small screens?
   • Answer: It keeps its full size rather than shrinking, which means at narrow widths it can sit close to or overlap nearby content. When you use Fixed size, leave some space around the element in your layout so it always displays comfortably.
5. Does Fixed size lock the element's position as well as its size?
   • Answer: Yes. A fixed-size group or mask keeps both its pixel dimensions and its position steady as the Experience scales around it.
6. Does fixing size work with Breakpoint Variants?
   • Answer: Yes. Fixed size and lock font size apply within whichever Variant is currently showing, so you can still tailor your design per screen size using Breakpoint Variants.

If you have any follow-up questions or if you need any additional assistance, please don't hesitate to reach out to support@getfastr.com.