Display none on mobile view html email

HTML & CSS
1

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”.

<div style="text-align: center; color:#B22222; "><img data-file-id="2388230" height="101" src="https://mcusercontent.com/4b1ee7e147d1ccf3cf26fb362/images/015f292d-c304-4cf1-bd82-bac4d15798c6.png" style=" float: right; width: 100px; height: 101px; padding-right: 20px; @media screen and (max-width: 600px) { 
   img  {
display: none;
  }
} " />
2

@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.

I have removed the attachment.

1 Like
3

gandalf458

My apologies. Thanks for the heads up. I will keep that in mind for future posts.

1 Like
4

I’m not sure that email clients understand media queries. I’m sure someone will correct me if I’m wrong.

5

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).

1 Like
6

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?

<div><img data-file-id="2388234" height="66" src="https://mcusercontent.com/4b1ee7e147d1ccf3cf26fb362/images/a41cb127-16f7-44ff-b8e8-f7d4187cda19.png" style=" float: left; padding-left: 20px; width: 66px; height: 66px; margin-top: 10px;" width="66" /></div>
<style type="text/css">@media screen and (max-width: 460px){
    #2388234{
    	display: none !important;
    }
    }
</style>
7

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 :).

8

Thanks again PaulOB,
With your ‘sage’ advice, I am narrowing the target. I had a feeling the problem may involve ID or Class - I will go back to the drawing board and keep working on it.

1 Like
9

You could try this in your media query:

[data-file-id="2388234"] {
  display: none!important;
}
10

Works a treat, thank you very much for your kind assistance.

1 Like
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.