Small screen. More breathing room.
Large mobile banner
320 × 100A taller mobile banner with space to separate the main message from its supporting brand and action.
Exact 320 px wide × 100 px high, including the border. No resizing. Scroll the preview when needed.
Two formats. One exact canvas.
Use the CSS and Animated GIF buttons above to compare the same original creative. The CSS container is exactly 320 × 100 CSS pixels; the GIF’s encoded canvas is exactly 320 × 100 image pixels. The 2-pixel creative border is inside those dimensions, not added to them. The previews never shrink to fit a smaller column.
Both versions show three scenes, two seconds per scene, repeated three times. The GIF contains nine encoded frames and no infinite-loop extension; it plays for 18 seconds and ends on the third scene. Play restarts the selected example; Stop shows its final frame. Reduced-motion preferences use a still preview.
Download editable HTML + CSS source · Download the CSS stylesheet · Download the animated GIF
View the complete 320 × 100 HTML + CSS source
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="robots" content="noindex,follow"><meta name="ad.size" content="width=320,height=100"><title>ClickToll 320 × 100 CSS banner example</title><style>
/* ClickToll original creative. Dimensions are the OUTER border box, in CSS pixels. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;width:320px;height:100px;background:#fff9ed}
.ct-creative{position:relative;display:block;width:320px;min-width:320px;max-width:320px;height:100px;min-height:100px;max-height:100px;overflow:hidden;isolation:isolate;border:2px solid #17131f;color:#17131f;text-decoration:none;font-family:Arial,Helvetica,sans-serif;line-height:1;contain:layout paint}
.ct-creative:focus-visible{outline:3px solid #17131f;outline-offset:-5px}
.ct-scene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:18px 18px 23px;overflow:hidden;background:#b9ff00;opacity:0;animation-duration:6s;animation-timing-function:steps(1,end);animation-iteration-count:3;animation-fill-mode:both}
.ct-scene:nth-child(1){animation-name:ct-first}
.ct-scene:nth-child(2){animation-name:ct-second}
.ct-scene:nth-child(3){animation-name:ct-third}
.ct-lime{background:#b9ff00}.ct-pink{background:#ff2e9a}.ct-cyan{background:#00e5ff}.ct-yellow{background:#ffd21f}
.ct-brand{position:relative;z-index:2;display:block;font-size:13px;font-weight:900;letter-spacing:-.5px;white-space:nowrap}
.ct-copy{position:relative;z-index:2;display:block;font-family:'Arial Black',Arial,Helvetica,sans-serif;font-weight:900;font-size:43px;line-height:.98;letter-spacing:-2px;text-transform:uppercase;white-space:pre-line}
.ct-bottom{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:2px solid #17131f;padding-top:10px}
.ct-caption{font-size:10px;font-weight:700;line-height:1.3;max-width:132px}
.ct-cta{display:block;flex-shrink:0;padding:9px 12px;background:#fff9ed;border:2px solid #17131f;box-shadow:3px 3px 0 #17131f;font-size:11px;font-weight:900;white-space:nowrap}
.ct-rainbow{position:absolute;bottom:0;left:0;right:0;height:7px;border-top:2px solid #17131f;background:linear-gradient(90deg,#ff2e9a 0 20%,#ffd21f 20% 40%,#b9ff00 40% 60%,#00e5ff 60% 80%,#8253eb 80%)}
.ct-art{position:absolute;right:-21px;top:-29px;width:118px;height:118px;border:15px solid #17131f;border-radius:50%;opacity:.12;pointer-events:none}
.ct-art::after{content:'';position:absolute;inset:9px;border:9px solid #17131f;border-radius:50%}
@keyframes ct-first{0%,33.332%{opacity:1}33.333%,100%{opacity:0}}
@keyframes ct-second{0%,33.332%{opacity:0}33.333%,66.665%{opacity:1}66.666%,100%{opacity:0}}
@keyframes ct-third{0%,66.665%{opacity:0}66.666%,100%{opacity:1}}
html[data-paused] .ct-scene{animation-play-state:paused}
html[data-frame] .ct-scene{animation:none!important;opacity:0!important}
html[data-frame="0"] .ct-scene:nth-child(1),html[data-frame="1"] .ct-scene:nth-child(2),html[data-frame="2"] .ct-scene:nth-child(3){opacity:1!important}
@media(prefers-reduced-motion:reduce){.ct-scene{animation:none!important;opacity:0}.ct-scene:nth-child(3){opacity:1}}
.ct-scene{padding:9px 11px 13px}.ct-brand{font-size:10px}.ct-copy{font-size:24px;line-height:1.02;letter-spacing:-1px;max-width:225px}.ct-bottom{position:absolute;right:12px;bottom:16px;border:0;padding:0}.ct-caption{display:none}.ct-cta{font-size:9px;padding:8px 8px}.ct-art{width:90px;height:90px;right:-30px;top:-20px;border-width:10px}.ct-rainbow{height:5px}
</style></head><body><a class="ct-creative" href="https://clicktoll.com/display-advertising/" target="_top" aria-label="Explore the ClickToll display advertising guide"><span class="ct-scene ct-pink" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">MAKE THE
TAP COUNT.</strong><span class="ct-bottom"><span class="ct-caption">One idea. One next step.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span><span class="ct-scene ct-yellow" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">SMALL SPACE.
CLEAR IDEA.</strong><span class="ct-bottom"><span class="ct-caption">Keep the promise clear.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span><span class="ct-scene ct-cyan" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">YOUR NEXT
GOOD IDEA.</strong><span class="ct-bottom"><span class="ct-caption">Ideas for better banners.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span></a><script>
/* Playback controls affect CSS keyframes; no image or animation framework is required. */
(()=>{'use strict';const root=document.documentElement;
const preview=new URLSearchParams(location.search).has('preview');
if(preview){root.setAttribute('data-paused','');root.setAttribute('data-frame','0');}
window.addEventListener('message',event=>{
if(event.source!==parent||event.origin!==location.origin||!event.data||event.data.type!=='clicktoll-banner')return;
const action=event.data.action;
if(action==='play'){
root.setAttribute('data-frame','0');void document.body.offsetWidth;
root.removeAttribute('data-frame');root.removeAttribute('data-paused');
}else if(action==='stop'){
root.setAttribute('data-paused','');root.setAttribute('data-frame','2');
}else if(action==='reset'){
root.setAttribute('data-paused','');root.setAttribute('data-frame','0');
}
});})();
</script></body></html>View the exact-size animated GIF embed
<a href="https://clicktoll.com/display-advertising/">
<img src="https://clicktoll.com/assets/banners/320x100/clicktoll-320x100-animated.gif"
width="320" height="100"
style="display:block;width:320px;height:100px;min-width:320px;max-width:none;flex:none;border:0"
alt="Explore the ClickToll display advertising guide">
</a>Where this canvas fits
Mobile inventory that supports a taller banner and can reserve the correct space without obscuring surrounding content. Treat the placement specification as the source of truth; a familiar format name does not guarantee availability in every campaign or market.
A useful way to compose the message
Use the second line or extra height to clarify the promise. Keep the action visible and review the full destination on a phone. Sketch the recognition cue, the useful promise, and the action before adding decorative detail. Review the composition at the intended size, not only enlarged inside a design tool.
The mistake to avoid
Filling the additional space with all the details removed from a desktop version. Keep the mobile message deliberately focused. A clear, narrow promise is easier to carry from the banner to its destination. Check that the action label accurately describes the page or resource the visitor will encounter.
What the blank canvas includes
The download is a simple SVG at exactly 320 × 100 pixels, with a visible frame and editable text labels. Open it in a compatible vector editor as a planning canvas. Replace the labels with your approved creative, then export or package the final artwork to the recipient’s requirements.
Before you deliver
Check the actual output dimensions, file weight, supported format, destination, language, creative version, and any animation or click-handling rules. A browser preview is not a substitute for the receiving platform’s approval process. The ad specifications page explains the difference between a static image and an HTML creative package.
Compare a related shape
See the 320 × 50 format to compare the proportions. Keep the underlying offer consistent while deliberately rebuilding line breaks, spacing, and visual hierarchy for the new canvas.