I have a responsive HTML email, where I want on a mobile device hide that button and show a different button -


i have responsive html page, buttons go optin , optout page. mobile want hide button , show 2 other buttons instead. i'm not looking @ specific mobile phones rather screensize:

/* media query mobile */

    @media screen , (max-width: 480px) {        /* resizes tables , images 100% wide proportionate width */     table[class=emailwrapto100pc], img[class=emailwrapto100pc]{width:100% !important; height:auto !important;}      /* hide stuff on mobiles */     table[class=emailnomob],td[class=emailnomob],img[class=emailnomob],span[class=emailnomob]{display:none !important;} 

i use hide tabs on bottom of page , show links large buttons instead. instead of reformatting link, want use different link altogether.

(since typing on mobile drag, want use filled out mailto: instead, person doesn't have type anything).

the answer in face... had 2 classes defined.

    <class="emailmobbutton"> 

to make link big button and

    <class="emailnomob"> 

this code buttons:

    <td align="center" style="padding-bottom:20px;"><a href="#" class="emailmobbutton"> our website</a><span class="emailnomob"> | </span> 

and changed:

    <span class="emailnomob"><a href="#">join now</a></span>     <span class="emailnomob"> | </span>     <span class="emailmobbutton"><a href="#">send mail</a> 

works charm. can use mailto: link now.


Comments

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

CSS3 Transition to highlight new elements created in JQuery -