Preview Options in Spectra (Desktop, Tablet & Mobile)

Spectra allows you to preview and adjust your design for Desktop, Tablet, and Mobile without leaving the editor.

Why Preview Options Matter

Your website is viewed on different screen sizes:

• Desktop (laptops and large screens)
• Tablet (iPads and medium screens)
• Mobile (phones)

A layout that looks perfect on desktop can easily break on mobile.

Preview options help you:

• Check how your layout adapts on different devices
• Adjust spacing, font sizes, and alignment per device
• Avoid broken or unreadable layouts on mobile

Where to Find Preview Options

In the WordPress block editor:

1. Look at the top-right corner of the editor toolbar
2. Click the Preview icon (screen icon)
3. A dropdown will open with these options:
   • Desktop
   • Tablet
   • Mobile
   • Preview in new tab

Selecting Desktop, Tablet, or Mobile changes the editor canvas size.

Desktop Preview

What it Represents

• Large screens (laptops and desktops)
• This is the default view when you open the editor

When to Use It

• Designing overall layout structure
• Setting default font sizes
• Aligning sections and columns

Important to Know

• Desktop settings act as the base styles
• Tablet and mobile settings override desktop styles when needed

Tablet Preview

What it Represents

• Medium-sized screens (tablets, iPads)
• Width is smaller than desktop but larger than mobile

When to Use It

• Adjusting column stacking
• Reducing spacing or font sizes
• Fixing elements that look cramped

Example Adjustments

• Change 3-column layout to 2 columns
• Reduce padding
• Center-align text

Mobile Preview

What it Represents

• Small screens (phones)
• Limited horizontal space

When to Use It

• Ensuring text is readable
• Making buttons easy to tap
• Avoiding horizontal scrolling

Example Adjustments

• Stack columns vertically
• Increase button size
• Reduce heading font size

How Responsive Controls Work in Spectra

Many Spectra block settings have device-specific icons next to them:

• Desktop icon
• Tablet icon
• Mobile icon

How to Use Them

1. Switch to Tablet or Mobile preview
2. Click the device icon next to a setting (e.g. font size, padding)
3. Adjust the value

That change applies only to that device.

Common Beginner Mistakes (Avoid These)

❌ Designing only in desktop view

❌ Forgetting to check mobile preview

❌ Overwriting mobile styles while still in desktop mode

❌ Assuming WordPress automatically fixes mobile layouts

Spectra gives you control, but you must use it.

Best Practice for New Users

Follow this order:

1. Design your layout in Desktop
2. Switch to Tablet and fix spacing/layout issues
3. Switch to Mobile and optimize readability

Always preview all three before publishing.

If your site looks good on all three previews, you’re doing it right!