In Adobe Captivate, responsive design can be simplified by Auto Layout, which adjusts padding proportionally across devices, keeping the design consistent and visually appealing. Here’s a quick breakdown of how padding scales across different resolutions to maintain visual harmony in your project.

👉 Example:

With a base desktop resolution of 1366x768px and 50px padding, Adobe Captivate’s Auto Layout scales it down to 28px on tablets and 16px on mobile.

Source: https://helpx.adobe.com/captivate/help/add-padding-to-content-blocks–components–and-objects.html

This means:

Desktop to Tablet: Padding reduces by ~44%

Desktop to Mobile: Padding reduces by ~68%

🔢 Proportional Scaling Across Resolutions

By applying these percentages, you can create responsive padding across devices:

4K Desktop (3840px): 120px padding ➔ Tablet: 68px ➔ Mobile: 40px

Full HD (1920px): 60px padding ➔ Tablet: 34px ➔ Mobile: 20px

Small Mobile (360px): 14px padding ➔ Tablet: 8px ➔ Mobile: 5px

This scaling strategy maintains the look and usability of your design across screens while enhancing user experience.

💡 Tips:

Start with a base desktop padding.

Scale proportionally by applying reduction percentages for tablet and mobile.

Round values to keep numbers user-friendly and consistent.