Responsive Breakpoints

WP-Nexus uses a mobile-first responsive system with three breakpoints. Styles cascade from desktop down -- tablet inherits desktop values, mobile inherits tablet values.

Breakpoints

Breakpoint	Width Range	Description
Desktop	1024px and above	Default styles. Applied to all screen sizes unless overridden.
Tablet	768px to 1023px	Overrides desktop styles on medium screens.
Mobile	Below 768px	Overrides tablet (and desktop) styles on small screens.

How It Works

1. You set styles at the Desktop breakpoint first. These are the base styles.
2. Switch to Tablet to override only the properties that need to change on medium screens.
3. Switch to Mobile to override properties for small screens.

Properties that you do not override at a smaller breakpoint inherit the value from the next larger breakpoint.

Example Cascade

Property	Desktop	Tablet	Mobile	Effective Mobile Value
fontSize	18px	16px	14px	14px (set explicitly)
padding	24px	16px	--	16px (inherited from tablet)
display	flex	--	--	flex (inherited from desktop)

Switching Breakpoints

In the style editor, click the breakpoint selector at the top of the Styles panel:

• Desktop icon -- Edit desktop styles (default).
• Tablet icon -- Edit tablet overrides.
• Mobile icon -- Edit mobile overrides.

A colored indicator shows which properties have overrides at the current breakpoint.

Common Responsive Patterns

Stack columns on mobile

Property	Desktop	Mobile
display	flex	flex
flexDirection	row	column
gap	24px	12px

Full-width on mobile

Property	Desktop	Mobile
width	50%	100%
maxWidth	600px	100%

Hide on mobile

Property	Desktop	Mobile
display	block	none

Smaller text on mobile

Property	Desktop	Tablet	Mobile
fontSize	32px	24px	20px

Reduced spacing on mobile

Property	Desktop	Mobile
padding	32px	16px
margin	0 auto	0 8px

Best Practices

1. Design desktop first. Set all your base styles at the desktop breakpoint.
2. Override sparingly. Only set tablet/mobile values for properties that actually need to change.
3. Test at each breakpoint. Use the breakpoint preview to check your layout.
4. Use flex and percentages. These naturally adapt to screen size, reducing the number of overrides needed.
5. Reduce font sizes gradually. A common ratio: desktop 18px, tablet 16px, mobile 14px.