0

Marketing Cloud email builder has functionality to "hide from desktop" but not "hide from mobile" This is frustrating for our team who have text overlay on some images which make it illegible when scaled for mobile or domineering if scaled for desktop (mobile first design). Our previous platform allowed us to show the hero image for just mobile / tablet or desktop. I think it is strange to allow it to hide one way and not the other. But we have been trying to work on a HTML solution.

The code we have is here (it will not let me copy the full code!). However, the image does not scale – it seems to be a fixed width. Has anyone had similar issues and a better solution OR can anyone help fix the code so that it is responsive? We are new to the platforms so apologises if this has been asked before. I went through forums and could not find a response.

SHOW ON MOBILE AND HIDE ON DESKTOP

@media only screen and (max-width: 699px) { /*------------MOBILE HIDE AND SHOW---------------*/ .mobile-show { display: block !important; height: auto !important; width: auto !important; max-height: none !important; max-width: none !important; } }

MOBILE CONTENT and not shown on Desktop

SHOW ON DESKTOP AND HIDE ON MOBILE

@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 { display: none !important; width: 0px !important; }

Desktop Content Not shown on Mobile

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.