Challenge

  • What looks good on desktop may be too small, cropped, or difficult to read on mobile.
  • Without a mobile preview, it’s hard to ensure the best layout for different screen sizes.
  • Issues noticed only after publishing lead to unnecessary rework.

➔ Solution: Use the mobile preview

With the mobile preview, you can check how your Web Story looks on smartphones directly in the editor. This ensures that text remains readable, images are displayed correctly, and layouts are optimized for mobile devices. You can make any necessary adjustments immediately, avoiding post-publication fixes.

Why this feature is important

✔ Perfect display on all devices
Allows early testing and adjustments to ensure optimal appearance across different screen sizes.

✔ Better readability
Ensures text remains clear, prevents unwanted line breaks, and maintains optimal contrast.

✔ More efficient workflow
Save time by reviewing and adjusting in the editor instead of fixing errors after publishing.

How to apply this feature

1️⃣ Activate mobile preview
Click the smartphone icon in the lower-right corner of the editor to open the preview.

2️⃣ Check the display
Scroll through the preview and ensure that text is readable and images are correctly positioned.

3️⃣ Make adjustments
If necessary, refine motif areas, text sizes, or add separate 9:16 media.

Combine this feature with

✐ Optimize motif placement
Use motif areas to keep important image elements visible—on both desktop and mobile.

✐ Use separate mobile images & videos
Upload alternative portrait media for an optimized mobile display.

✐ Apply dynamic shadow
Enhance readability without compromising the design