In Content Builder you can control appearance of content on mobile devices. The Show/Hide buttons are available in Block Settings for Content boxes. It requires adding a class to your HTML template but it works as expected. Specified content block will appear or not on mobile screens. What if you want to show/hide on either mobile or desktop?
.mobile-hidden {
display:none !important;
}
Optimizing for mobile should not be limited to showing or hiding content on mobile devices. Sometimes you want do differentiate between desktop and mobile in layout, size, amount of content or content type. In other words you need a way to show/hide on mobile but also show/hide on desktop. For web content displayed in browsers, “display: none” would take it easily. For email due to Outlook and Yahoo! it is of course more hacky.
To fully embrace mobile content optimization and control content for desktop and mobile here is a bulletproof solution (quoted exactly after Justin Khoo from Freshinbox).
Define Show and Hide Mobile Classes
Make sure you have classes in CSS media query section for showing/hiding content on mobile, for example:
@media only screen and (max-width: 699px) {
/*------------MOBILE HIDE AND SHOW---------------*/
.mobile-hidden {
display: none !important;
height: 0px !important;
width: 0px !important;
max-height: 0px !important;
max-width: 0px !important;
}
.mobile-show {
display: block !important;
height: auto !important;
width: auto !important;
max-height: none !important;
max-width: none !important;
}
}
Hide Content on Desktop
Wrap the mobile-specific content in <div> and conditional comments for Outlook. Desktop clients which respect display:none will hide mobile content while ignoring Outlook conditionals, mobile clients will apply rules from the mobile-show class (!important), and Outlook clients will treat content as commented. For example:
<!--[if !mso]><!-->
<div class="mobile-show" style="display:none;max-height:0px;overflow:hidden;">
MOBILE CONTENT
</div>
<!--<![endif]-->
Show Content on Desktop Only
o show content on desktop only and hide it from mobile, simply add mobile-hide class to the wrapping table or use Hide in the Content Builder toggle switch on Block Settings.
<table class="mobileHide" width="100%" cellspacing="0" cellpadding="0" border="0">