Home Resources Blog

Almost every day we see web-inspired ideas being translated for email – like this novel fixed-location call to action (CTA) by cool customers Hugh Roper and Crystal at Diamond Resorts International.

Fixed-position CTA at the top of an email message

The concept behind this technique is simple. Mobile device screens are small, so it’s unlikely that any one part of the message will always be visible as a subscriber reads an email. However, if there’s a vital piece of information – say, a link, or a phone number – that you’d always like to have present, then you’ll need a clever solution.

This is where Hugh’s fixed-location CTA comes in handy. By adding a simple line of CSS, he’s made it possible to feature an attractive call-to-action that, like with glue, ‘sticks’ to the top of the email message while the reader scrolls. Here’s an abridged snippet of the code:

@media only screen and (max-width: 768px) {
   [class=fixed] { position: fixed; top:0; left: 0; right: 0; }


<div class="fixed">
   <a href="tel:+x-xxx-xxx">Call Today</a>     
   <div>Mention Code: xxyyzz</div>

As you can see, position: fixed has been used to ensure the CTA remains at the top – not unlike what you would see in a regular browser window. The rest of the email content simply slides underneath. This same technique can also be used to pin the CTA to the bottom of the message (using bottom: 0; instead of top), which could be arguably better in some scenarios.

When not featured at the top of the email message, the CTA isn’t hidden – instead, it features near the footer of the email message when viewed in desktop and webmail clients.

Why mobile only?

While it’s entirely possible to use this technique in the regular, non-responsive version of an email newsletter, support for the position CSS property tends to be a lot less consistent in desktop and webmail, than it is in newer mobile email clients. So far, we’ve had considerable success with this technique in Apple iOS Mail and Mailbox, which dominate email client market share. While the fixed CTA works in the default Android client, links in the CTA don’t fare so well.

Many thanks again to Hugh and Crystal for both a nifty idea and amazing new responsive email technique – we can’t wait to see it in more email campaigns. Do you have a suggestion for making the CTA in an email newsletter stand out? Let us know all about it in the comments.

  • Michael C.

    When I was in-between an old Nexus S and the HTC One, I had a temporary Android phone, the Samsung Galaxy Pocket. It has a 2.8″, 240×320 screen, and while the inferior resolution itself wasn’t that big a deal, the aspect ratio often was. With the majority of Android smartphones out there having 9:16 ratio screens, many app and website developers forget that that’s merely a trend, not the rule. Thus, I ran into quite a number of instances where the developer assumed I had more vertical space than I did. This resulted in websites with fixed-position menus whose bottom parts were simply unreachable (you couldn’t scroll down to them since the menu was fixed-position), and apps whose key interface elements were either being too compressed to be used, or else completely obscuring other important interface elements.

    My concern about this method is that, after taking into account any OS chrome and email client interface, any fixed-position element could obscure so much of the rest of the email as to make it unreadable. It seems to me to be wise never to assume there will be ample surplus screen real-estate for fixed-position elements… UNLESS, of course, you place the elements’ fixed-position-ness inside a media query that tells you exactly how much vertical space you have available to utilize.

  • Finge

    Thanks for this great tip!

    I implemented this in one of templates that we created using the template builder. The fixed button is created as a repeater element so that we can easily add the button as a layout element. Works great!

    However in iOS 7 the fixed button is ‘overrun’ by the overlay fixed OS menu. The fixed button disappears beneath the menu and is effectively rendered useless.

    I am sure there is an easy way around this. Any ideas?

  • Dan

    Awesome idea. Will test it on some point next week and will let you know what happen.
    Agree with Michael C. on aspect ratio but it has to be tested

  • Craig

    Really like the look of this.

    Im a beginner to CSS and @media attributes though.

    Is anyone able to talk me briefly through how to implement that code screen shot above?


  • Ros Hodgekiss

    Hi there Craig, I recommend taking a look at our Guide to Responsive Email Design. It covers the theory and a lot of the code behind ideas like this one :)

  • Kataskeui Istoselidon

    Thats really useful, thanks!!

  • Igor

    It doesn’t work in iPhone iOS7.

  • Matt

    Just chiming in with others to say it’s getting hidden in iOS7 behind the tray of email-tools at the bottom of the email app. Works great on previous versions of iOS, though! Will try to find an iOS7 fix.

  • Jarrod

    Would love to hear of an iOS7 fix.

  • Ros Hodgekiss

    Hey folks, just letting you know that I’ve been tapping away at a fix and so far, it’s been a touch elusive. You may have heard about position: sticky; – which in theory, should result in an element “sticking” to its parent on scroll. However, so far, we haven’t had a lot of luck.

    Our best bet is to stick to position: fixed; for now, but please pipe up in our forums if you come across a better solution.

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.


See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free