Closed j87x3inq2x3w7 closed 1 year ago
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.
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>
Maybe Hubspot alter the HTML before sending it to Litmus ? Can't you directly use Litmus to see if it's the case
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.
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)![image](https://user-images.githubusercontent.com/60732910/230030907-08afaaac-855d-475e-926f-7b14f5db6706.png)
now native client by iOS:
media queries work, becouse color change
Any idea what happen here ? : )