The Style Indicator helps you see where an element’s style comes from, usually the main layout (like desktop).
Tip: It also shows if your shared styles are updated correctly.
Style States
There are three main style states:
Default (⚪️): The original style when you first add an element.
Custom (🟡): The style has been changed from the default or inherited style.
Inherited (🟢): The style comes from the main layout.
Using the Style Indicator for Responsiveness
Instead of adjusting each element in multiple layouts, use the style indicator to make your content responsive with less work. Use automatic sizing and sizing values like percentages for responsive design, based on a single layout.
Best Practices
On the main layout (e.g. desktop), styles will be custom (🟡).
On tablet and mobile layouts, try to use inherited (🟢) or default (⚪️) styles.
Use percentages or automatic sizing instead of pixel sizes to make your elements adjust smoothly across different devices.