Adobe Campaign Classic v7 & Campaign v8

Yippeeee25 · 12/14/23

Hi, in Adobe Campaign, is there a way to show or hide an image on mobile vs desktop. Is there a CSS class that I can apply that will hide a specific image on mobile or desktop?

Thanks!

ParthaSarathy · 12/14/23

Hi @Yippeeee25 ,

Add below style script in <head>

<style>
	@media screen and (max-width: 600px) {
		table, img { width:100%!important; }	
	}
	@media screen and (max-width: 420px) {
			.DisplayForDesktopOnly{
				display:none !important; 
				mso-hide:all !important; 
				visibility:hidden !important;	
			}			
			.DisplayForMobileOnly{
			display:block !important; 
			}
		}
</style>

And for Desktop image, call the class class="DisplayForDesktopOnly"

and for Mobile image, call the class class="DisplayForMobileOnly" and in its style give "display:none;">

Example,

<html> 
<head>
<style>
	@media screen and (max-width: 600px) {
		table, img { width:100%!important; }	
	}

	@media screen and (max-width: 420px) {
			.DisplayForDesktopOnly{
				display:none !important; 
				mso-hide:all !important; 
				visibility:hidden !important;	
			}			
			.DisplayForMobileOnly{
			display:block !important; 
			}
		}
</style>
</head>
<body> 
<table valign=”top” align="center" bgcolor="white" width="600" border="0" cellpadding="0" cellspacing="0">
    <tr>
	 <td style="padding-bottom:10px;">
	 Text
	 </td>
	</tr>
	<tr>
		<td class="DisplayForDesktopOnly" width="200" valign="top" align="center" style="">
				<img src="https://image_for_DESKTOP.jpg" width="200" height="170" border="0" style="min-width:120px;  max-width: 200px;"/>
		</td>
    </tr>
    <tr>	
		<td class="DisplayForMobileOnly" width="200" valign="top" align="center" style="display:none;">
				<img src="https://image_for_MOBILE.jpg" width="200" height="170" border="0" style="min-width:120px;  max-width: 200px;"/>
		</td>
	</tr>
	<tr>
	<td style="padding-top:10px;">
	 Text
	 </td>
	</tr>
</table>
</body>   
</html>

So, for Desktop (more than 420 pixel) it will display desktop image

And for mobile rendering (for 420px and Less than 420 pixel), it will render mobile image.

Modify the above script with your HTML content and logic.

~ ParthaSarathy S

View solution in original post

ParthaSarathy · 12/14/23