The examples below cover the most common scenarios when configuring the Max Size (W and H) for modal lightweight templates in the Composer card. These settings only apply to modals — inline templates are sized by the container the client places on their page.
These examples were made with mobile browsers in mind, as 70–80% of visitors browse on mobile devices. Template sizing should work well on phones first, then scale up gracefully to tablets and desktops. This is why vw and vh (viewport units) are the recommended default — they adapt to any screen size automatically.
The explanation of metrics (px, %, vw/vh, em) supported in the Composer Action Cards and their behavior when the Modal format is selected is available in the main Lightweight template documentation.
Important: For all relative values — %, vw, vh — the maximum allowed value is 100. Values greater than 100 will not be accepted; however, your typed value remains in the card. The reason is to prevent errors and misconfigurations. Relative values greater than 100 for modal template formats would exceed the available viewport or container size and break stickiness.
1. Standard Subscription Modal (Recommended Starting Point)
Goal: A subscription offer that looks good on phones, tablets, and desktops without needing separate experiences for each.
Settings: W = 90vw, H = 80vh
Why this works: On a typical phone (390px wide), this renders at roughly 351px wide — comfortably within the screen. On a 1440px desktop, it's about 1296px wide. The modal scales proportionally across all devices because vw and vh always reference the browser window.
This is the safest default for most use cases. Unless you have a specific reason to choose another unit, start here.
2. Smaller Focused Modal (Newsletter Signup, Simple CTA)
Goal: A compact modal that doesn't overwhelm the screen — suitable for a newsletter signup or a quick "subscribe now" message.
Settings: W = 85vw, H = 50vh
Why this works: On a phone, 85vw gives the modal nearly full width (which it needs on a small screen), while 50vh keeps it compact — the reader can still see the article behind the modal. On desktop, the same settings produce a smaller, centered overlay that feels focused rather than imposing.
For very short modals (e.g., a single-line CTA with a button), you can reduce height further to 30vh or 35vh.
3. Full-Screen Takeover
Goal: A high-impact offer that covers the entire screen — often used for first-time visitors, major promotions, or hard paywall prompts.
Settings: W = 100vw, H = 100vh
Why this works: The modal fills the entire browser viewport on every device. On mobile, this is often the most natural layout — readers are used to full-screen modals on phones. On desktop, it creates a bold takeover.
If you want the full-screen effect on mobile but a more contained modal on desktop, set up two separate experiences in Composer: one targeting mobile with 100vw x 100vh, and another targeting desktop with 70vw x 70vh.
4. Pixel-Perfect Modal (Use with Caution on Mobile)
Goal: Your design team created a precisely laid out modal (specific image placements, pricing columns, payment form) that must render at exact dimensions.
Settings: W = 500px, H = 600px
Why this works: Fixed pixels give full control over exact dimensions. The modal renders at exactly 500x600 on every screen. This is useful when the template design depends on precise positioning.
Important — Mobile warning: Most phones are 360–414px wide. A 500px modal will overflow and force horizontal scrolling — a poor reader experience for the majority of your audience. If you use fixed pixels:
-
Keep the width under
360pxto be safe across all phones, or -
Set up a separate mobile experience in Composer with smaller dimensions (e.g.,
340pxx500px), or -
Better yet, use
vw/vhinstead and let the template adapt automatically.
Fixed pixels are best suited for desktop-only experiences where you can be certain the reader's screen is large enough.
5. Modal Sized Relative to the Page Container
Goal: A modal that matches the width of its parent container on the page rather than the full browser window.
Settings: W = 100%, H = a value in px or vh
Why this works: The percentage references the parent element's width. If the page content column is 800px wide on desktop, the modal matches that.
Keep in mind:
-
On mobile, the parent container is usually already close to the full screen width, so
100%and100vwwill produce a similar result. -
If the parent element has a
max-widthset (e.g., the.offer-wrapperclass hasmax-width: 1110px), the modal won't exceed it — even at values above 100%. -
Do not use
%for height. The parent container typically has no explicit height set, so a percentage-based height will have no visible effect. Usepxorvhfor height instead.