Canvas-Ready Responsive Audit

Canvas Copy-Paste Test: This page uses ONLY styles that would work when pasted into Canvas. No custom CSS in the head section. Resize your browser to test how our components behave with real Canvas constraints.

Test 1: Container Behavior

Testing the .dp-wrapper container behavior. Should not overflow on any screen size.

Mobile Test

Short heading - icon should stay aligned.

This is a significantly longer heading that will test how the icon positioning and text wrapping behave when content extends to multiple lines across different screen sizes

Long heading - icon should maintain position at top-left of text block.

Test 2: Typography Scaling

This is lead text that should remain readable at all screen sizes without custom responsive CSS.

This is dp-lead text for comparison. Both should work in Canvas.

Regular paragraph text testing line length and readability across devices.

Content Block Spacing

Testing how content block padding and margins behave responsively using only our canvas-complete.css styles.

This content should maintain appropriate spacing on mobile, tablet, and desktop without custom media queries.

Learning Objective

By the end of this section, you will be able to test responsive behavior using only Canvas-compatible styling.

This simulates real Canvas lesson content. The styling should work identically whether viewed locally or after being pasted into Canvas.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Key Insight

Canvas responsive behavior depends on Bootstrap's built-in responsive features and our canvas-complete.css styles - not custom CSS that can't be pasted into Canvas.

Canvas-Ready Responsive Checklist:

Key Test: Everything here should look identical when pasted into actual Canvas.