CODEWITHSUNDEEP
htmlcssmedia-querieshtml-email
Teilmann
Teilmann

Reputation: 2168

HTML Email image not showing on mobile email clients

I am trying to create an html email newsletter, and i have to substitute one image for another, by using media queries. It works on the desktop clients, and i can see that the image gets changed, but on the cellphone, the image doesnt show at all.

Does anyone have any experience with this?

the header_mobile is display: none; outside the media query, ofc.

html:

<td id="header" align="center" >
      <a href="http://ezzence.dk">
             <img src="http://www.thomasteilmann.com/nyhedsbrev/img/header.jpg" alt="Ezzence Nyhedsbrev" />
      </a>
</td>
<td id="header_mobile" align="center" >
      <a href="http://ezzence.dk">
             <img src="http://www.thomasteilmann.com/nyhedsbrev/img/mobile/header.jpg" alt="Ezzence Nyhedsbrev" />
      </a>
</td>

css:

#header_mobile{
    display: table-cell;
 }

 #header{
    display: none;
 }

Upvotes: 0

Views: 2023

Answers (1)

John
John

Reputation: 12193

Both iPhone and Android 4 default client support media queries, so that isn't the issue. It just seems like your media query is not firing.

Not sure what you have your media queries set to, but this should work fine for those devices:

@media only screen and (max-width: 479px) { display:table-cell !important; }

Don't forget the !important part. There is also a difference between max-device-width and max-width, so just check what your ranges are for each device.

Upvotes: 2

Related Questions