0

I have created HTML newsletter template and i am using this simple media query but it is not working on gmail IOS app. I have removed all other css from file. I tried @media with screen also

<style>
  @media (min-width: 639px) { 
  .strict-responsive{
    background-color: yellow;
    width: 50% !important; max-width: 50% !important; display: table-cell !important; margin: 0 auto !important; text-align: center !important;
  }
}
 @media (max-width: 640px) {
   .strict-responsive{
       background-color: blue;
    width: 100% !important; max-width: 100% !important; display: table !important; margin: 0 auto !important; text-align: center !important;
  }
 }
</style>

I have added

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml" lang="en">

<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

and HTMLS are below. Links and urls are working and productions based.

<div id="section_1633119029896" class="hse-section">
    <div class="hse-column-container hse-border" style="background-color:#ffffff;">
        <div id="column_1633119029896_0" class="strict-responsive">
            <div id="hs_cos_wrapper_module_16331191216405" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="module">
                <table class="hse-image-wrapper" role="presentation" width="100%" cellpadding="0" align="center" cellspacing="0">
                    <tbody>
                        <tr>
                            <td align="center" valign="top" style="text-align:center;padding:10px 15px 10px 10px;  font-size:0px;">
                                <a href="mobile-phones/iphone-13?capacity=128GB&amp;color=Pink&amp;contractTerm=36" target="_blank" data-hs-link-id="0">
                                    <img alt="iPhone 13" src="/iPhone%2013.jpg" style="max-width:100%;font-size:16px;" width="254" align="middle" class="stretch-on-mobile"></a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div id="column_1633119029896_1" class=" strict-responsive">
                <div id="hs_cos_wrapper_module_16331191444106" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module" style="color: inherit; font-size: inherit; line-height: inherit;" data-hs-cos-general-type="widget" data-hs-cos-type="module">
                    <table class="hse-image-wrapper" role="presentation" width="100%" cellpadding="0" align="center" cellspacing="0">
                        <tbody>
                            <tr>
                                <td align="center" valign="top" style="text-align:center;padding:10px 15px 10px 10px; font-size:0px;">
                                    <a href="mobile-phones/iphone-12?capacity=128GB&amp;color=Blue&amp;contractTerm=36" target="_blank" data-hs-link-id="0">
                                        <img alt="iPhone 12" src="/iPhone%2012.jpg" style="max-width:100%;font-size:16px;" width="254" align="middle" class="stretch-on-mobile"></a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
Bilal Rabbi
  • 1,602
  • 2
  • 18
  • 39
  • Does this answer your question? [How do I write a media query for Gmail?](https://stackoverflow.com/questions/49701247/how-do-i-write-a-media-query-for-gmail) – Syfer Oct 04 '21 at 10:58

1 Answers1

0

I wasn't able to replicate the issue you're seeing, however I did notice you're missing a head tag after the html tag.
With this missing, the background colours weren't rendering which flags that there is an issue.

With/without adding that in, the MQs were still working for me, however one tip would be to format your MQs like this:

@media only screen and (max-width:600px) {...}

Let us know how making these changes work for you.