Problem with media query in gmail app

[j87x3inq2x3w7]

Is it a common problem that gmail doesn't display media queries correctly? I mean ignoring media queries. Other mail clients display media queries correctly. Is it just litmus that generates fake email views?

My physical device in gmail app shows correct view but litmus in different hardware/system configurations and gmail app always ignores media queries.

I'm using this media queries:

@media (max-width: 480px) and (min-width: 351px) { .mobi div { font-size: 14px !important; color: green !important; } } etc...

for that mjml stuff:

<mj-text css-class="mobi" color="white" font-size="15px" font-weight="400" padding="0 0 8px 0" background-color="white"> dasdasdas: </mj-text>

Now some screen by litmus: gmail app on iOS (media queries dont work)

now native client by iOS: media queries work, becouse color change

Any idea what happen here ? : )

[iRyusa]

Hard to say without the full code. Maybe remove your (min-width: 351px) to see if it works. Litmus use real device to test, so the screenshot is most likely accurate. Make sure you don't inline anything in Litmus as it can alter the HTML.

[j87x3inq2x3w7]

Maybe remove your (min-width: 351px)

• it didn't help

Litmus use real device to test, so the screenshot is most likely accurate.

• exactly i use hubspot but it uses litmus to generate email preview

Make sure you don't inline anything in Litmus as it can alter the HTML.

• i just paste minify html code from mjml email editor to hubspot (litmus)

Hard to say without the full code.

• it's full code in mjml:

<mjml>
  <mj-head>
    <mj-style>

      @media (max-width: 480px) {
        .mobi div {
            font-size: 10px !important;
            color: red !important;
        }
      }

      body {
        padding: 0 14px;
      }

    </mj-style>
  </mj-head>
  <mj-body background-color="grey">

    <mj-section background-color="#4188ff" padding="12px 16px 0 16px">

      <mj-group>

        <mj-column padding="0 0">
          <mj-text css-class="mobi" color="white" font-size="15px" font-weight="400" padding="0 0 8px 0" background-color="white">
            dasdasdas
          </mj-text>
          <mj-text css-class="mobi"  color="white" font-size="15px" font-weight="400" padding="0 0 8px 0" background-color="white">
            dasdasd
          </mj-text>
          <mj-text css-class="mobi" color="white" font-size="15px" font-weight="400" padding="0 0 8px 0" background-color="white">
            dasdasd
          </mj-text>
          <mj-text css-class="mobi" color="white" font-size="15px" font-weight="400" padding="0 0 8px 0" background-color="white">
            dasdas
          </mj-text>
        </mj-column>

        <mj-column >
          <mj-text css-class="mobi" align="right" color="white" font-size="15px" font-weight="600" padding="0 0 8px 0" background-color="white">
            dasdas
          </mj-text>
          <mj-text css-class="mobi" align="right" color="white" font-size="15px" font-weight="600" padding="0 0 8px 0" background-color="white">
            dasd
          </mj-text>
          <mj-text css-class="mobi" align="right" color="white" font-size="15px" font-weight="600" padding="0 0 8px 0" background-color="white">
            dasdas
          </mj-text>
          <mj-text css-class="mobi" align="right"  color="#00cb19" font-size="15px" font-weight="600" color="#00cb19" padding="0 0 8px 0" background-color="white">
            dasdasdas
          </mj-text>
        </mj-column>

      </mj-group>

    </mj-section>

  </mj-body>
</mjml>

[iRyusa]

Maybe Hubspot alter the HTML before sending it to Litmus ? Can't you directly use Litmus to see if it's the case

[j87x3inq2x3w7]

Maybe Hubspot alter the HTML before sending it to Litmus ? Can't you directly use Litmus to see if it's the case

• currently i use email on acid and everythink looking good, I think Hubspot was a probelm.