0

I need to add some code so when I send an email on desktop to have a different link www.desktop.com under a button and to have a different link on mobile www.mobile.com . I've tried to use media queries and it seems to work when I preview it in content builder but when I get to send the email I'm getting both of the buttons displayed. Is it possible to achieve this? How? What method shall I use?

    <style>
  
        .download-link {
            display: none;
        }
        @media (min-width: 769px) {
            .download-link-desktop {
                display: block; 
            }
        }
        @media (max-width: 768px) {
            .download-link-mobile {
                display: block; 
            }
        }
    </style>


%%[ SET @ContentBlockName = "Intro" ]%%
<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#F6F6F6">
    <tr>
        <td width="24"></td>
        <td>
            <table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#FFFFFF" style="border-radius:8px;border:solid #E0E0E0 1px;">
                <tr>
                    <td width="24"></td>
                    <td>
                        <table border="0" cellpadding="0" cellspacing="0">
                            <tr>
                                <td height="24"></td>
                            </tr>
                            <tr>
                                <td style="color:#1A1A1A;font-family:'Roboto', Arial, sans-serif;font-weight:400;font-size:16px;line-height:24px" align="left" class="fallback">
                                    <span style="font-weight:bold !important;" class="fallback-bold"> 
%%[
VAR @FirstName
SET @FirstName = [FirstName]
SET @FirstName = ProperCase(@FirstName)

IF not empty(@FirstName) THEN]%%Dear %%=v(@FirstName)=%%, <br><br>
%%[ENDIF]%%</span>


<div style="display:none;">&nbsp;</div>

</td>
</tr>
<tr>
    <td height="24"></td>
</tr>
<tr>
    <td>
        <table border="0" cellpadding="0" cellspacing="0" bgcolor="#E5133A" style="border-radius:5px;">
            <tr>
                <td height="15" colspan="3"></td>
            </tr>
            <tr>
                <td width="20"></td>
                <td style="font-family:'Roboto',Arial,sans-serif;font-size:16px;line-height:16px;color:#FFFFFF;font-weight:500;text-align:center;" class="fallback-bold download-link download-link-desktop">
                    <a href="www.desktop.com" target="_blank" style="color:#FFFFFF;text-decoration:none;" alias="Download PDF">
                        Download now (Desktop)
                    </a> 
                </td>
                <td style="font-family:'Roboto',Arial,sans-serif;font-size:16px;line-height:16px;color:#FFFFFF;font-weight:500;text-align:center;" class="fallback-bold download-link download-link-mobile">
                    <a href="www.mobile.com" target="_blank" style="color:#FFFFFF;text-decoration:none;" alias="Download PDF">
                        Download now (Mobile)
                    </a> 
                </td>
                <td width="20"></td>
            </tr>
            <tr>
                <td height="15" colspan="3"></td>
            </tr>
        </table>
    </td>
</tr>
<tr>
    <td height="24"></td>
</tr>
</table>
<span style="color:#1A1A1A;font-family:'Roboto', Arial, sans-serif;font-weight:400;font-size:16px;line-height:24px">
dummy text
<br><br>


<br><br></span>
</td>
<td width="24"></td>
</tr>
</table>
</td>
<td width="24"></td>
</tr>
</table>

1 Answer 1

0

Looks like both are set to "display: block;" so you would need something to hide one or the other.

You could add something like .mblRemove {display:none;}

and add that to the desktop style.

And a .mblShow {display:block} for the mobile version.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .