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
Post a Comment