I came across an old artilce on fixed positioning, so as an excercise, Im attempting to implement a fixed CTA which is hidden in desktop view but visable in mobile view at the top. While of limited use in this scenario, Litmus seems to indicate that on mobile, the CTA is at least positioned correctly at the top. I've only found the CTA to stay fixed in the Blue Mail app as content scrolls underneath it. with the help of some friends, in any other app, the CTA scrolls with the content.

Im finding it odd that the positioning is being respected, but it doesnt stay fixed. Not sure if there's a simple workaround or would require something more complex and maybe not worth the trouble. I figured I'll tap the minds greater than mine on the board for possible ideas or thoughts.

I've included a snapshot of the email for a visual, plus code snippets of the relevant css and HTML

CSS:


    <style type="text/css">
    .hide {display:none;}

    @media only screen and (max-width: 599px) {
    .tbl {
        width:100% !important;
        min-width: 100% !important;
    }
   .cta { 
        position: fixed !important;
        top:0;
        left: 0;
        right: 0;
        z-index:300;
        display:block !important;
        text-align:center !important;
        padding: 10px 16px;
        background-color:#7d0d0d;
        color:#f1f1f1;
   }

   .cta + .header {
        padding-top: 35px;
    }
    }

    </style>

HTML SNIPPET:


    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
    <tr>
    <td align="center" valign="top" bgcolor="#ffffff">

    <div class="cta hide" style="display:none;">MY CALL TO ACTION</div>

    <table class="tbl header" width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#555555"       style="min-width:600px;">
    <tr>
    <td align="center" valign="top" style="font-family:Arial, Helvetica, sans-serif; color:#f1f1f1; font-size:24px;         padding:20px 15px 20px 15px;">Header Section</td>
    </tr> 
    </table>

    ...

    </td>
    </tr>
    </table>