I am trying to display: none; to hide an image on mobile device viewing html email. I can only edit the inline html for the text block. My code is not working and I would appreciate a bit of help if possible.
The inline code is attached; I have added the “@media query”.
@frankl please don’t put your code as an attachment as many people don’t like to download attachments and it’s not necessary. You can include it in your post. When you post code in the forum, you need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the code block.
Some email clients do understand media queries but none will understand them when placed in a style attribute.
Only valid property/value declarations can go in a style attribute (no pseudo elements or hover states either).
The media query would need to go in a style tag and target the element concerned in the proper way. The style tag can go in the body of the HTML when coding emails as it may be stripped from the head by email clients.
Note the distinction between a style attribute and a style tag (element).
Thank you for your suggestion. I have read that Mailchimp uses media queries in all their templates, which suggests that they are recognised by email clients. Does the following code meet your recommendation?
They are only recognised by a few email clients but luckily they will be the modern email clients used on mobile devices which are the ones you want to target. There is no guarantee however as far as email clients are concerned though.
The code you posted is in the correct format required except that there is no ID of the name you used. Even if there was as ID of #2388234 then CSS does not support ids or class names beginning with a digit (although some browsers may support them they are not valid css).
Use a normal ID or class and you should be good to go :).