Keep only what matters.
Compact mobile banner
300 × 50A narrow mobile strip for a very concise message, delivered at the exact requested dimensions.
Exact 300 px wide × 50 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 300 × 50 CSS pixels; the GIF’s encoded canvas is exactly 300 × 50 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 300 × 50 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=300,height=50"><title>ClickToll 300 × 50 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:300px;height:50px;background:#fff9ed}
.ct-creative{position:relative;display:block;width:300px;min-width:300px;max-width:300px;height:50px;min-height:50px;max-height:50px;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:5px 7px 8px;flex-direction:row;align-items:center;gap:6px}.ct-brand{font-size:9px;letter-spacing:-.5px;width:64px;flex-shrink:0}.ct-copy{font-size:12px;line-height:1.05;letter-spacing:-.35px;flex:1}.ct-bottom{border:0;padding:0;flex-shrink:0}.ct-caption,.ct-art{display:none}.ct-cta{font-size:8px;padding:7px 5px;border-width:1px;box-shadow:2px 2px 0 #17131f}.ct-rainbow{height:4px;border-top-width:1px}
</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-lime" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">LESS CLUTTER.
MORE CLARITY.</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">ONE MESSAGE.
ONE NEXT STEP.</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">SMALL SPACE.
BIG 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/300x50/clicktoll-300x50-animated.gif"
width="300" height="50"
style="display:block;width:300px;height:50px;min-width:300px;max-width:none;flex:none;border:0"
alt="Explore the ClickToll display advertising guide">
</a>Where this canvas fits
Mobile placements configured for a 300-pixel-wide creative, not as an automatic substitute for a 320-pixel request. 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
Check the longest word first and leave a clear margin. Prefer a single idea that can be recognized without stopping to zoom. 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
Stretching the file to 320 × 50. A small width change can distort type and does not satisfy an exact-size delivery request. 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 300 × 50 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.