Reponsive email template for gmail - media queries in head doesn't work
Question
I'm struggling with creating an email template "from scratch" (that I then copy paste in mailchimp as their CMS is not appropriate to what I have to do).
The general email looks good except a
text - image with width 50% that has to become:
image
text
With width: 100%
.responsive-width {
width: 50%;
}
@media only screen and (max-width: 480px) {
.responsive-width {
width: 100% !important;
min-width: 100% !important;
}
}
<td valign="top" style="padding: 0!important;">
<table class="responsive-width" align="right" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="align-mid" style="padding: 0!important;text-align: center !important;">
<img src="myimg-url.jpg" alt="newsletter photo cover">
</td>
</tr>
</table>
<table class="responsive-width" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding: 0!important;">
<h2 class="no-top">Title!</h2>
<div class="grey other-font">
TEXT
<br>
<a class="btn align-mid button-orange read-more left" href="">READ MORE</a>
</div>
</td>
</tr>
</table>
</td>
I removed the inline-style for more visibility.
The media query is in the <head> , within a <style> element. But I heard that it's not supported by gmail.
How am I supposed to make it responsive then?
1 answers
solution1
0 ACCPTED 2016-09-06 19:11:39
You can do it all inline, like this.
<img src="myimg-url.jpg" width="480" alt="..." border="0" style="width:100%; max-width:480px;">
Then, this way you have a fully responsive image and can avoid some of those client inconsistencies.
Additionally, you could add a class and target that element like this;
img.thumbnail{
max-width:480px !important;
width: 100% !important;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.