Mobile/Desktop Hide #770
Comments
|
If I am understanding correctly, you shouldn't have to do that in the compiled HTML, unless it's something very customized. You could write something like this below in your mj-style tag within the mj-head:
And then inline, you would write:
I've done LITMUS testing on that simple snippet above, and it works on everything Outlook 2007+ without any extra post MJML injections. Futhermore, you can then create another media query to block anything on desktop, by switching the min and max values around, and voila. Does that help? |
|
Thank you for writing back so quickly. I was having trouble with android and Gmail app ignoring display none. This sounds great. I'll have a look tomorrow thanks again!
Best
Jamie
… On 3 Aug 2017, at 18:34, Renato Dubbs ***@***.***> wrote:
If I am understanding correctly, you shouldn't have to do that in the compiled HTML, unless it's something very customized.
You could write something like this below in your mj-style tag within the mj-head:
@media only screen and (max-width: 480px) { *[class~=hide_on_mobile] { display: none !important;} }
And then inline, you would write:
<mj-column css-class="hide_on_mobile"> <mj-image src="http://www.google.com/google.png" padding="0" /> </mj-column>
I've done LITMUS testing on that simple snippet above, and it works on everything Outlook 2007+ without any extra post MJML injections.
Does that help?
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub, or mute the thread.
|
|
OH, I see. I've done tests on gmail, and it works fine using this. :) |
|
Amazing I can't wait to have another try tomorrow. Thanks again, your app is great!
Best
Jamie
… On 3 Aug 2017, at 19:27, Renato Dubbs ***@***.***> wrote:
OH, I see. I've done tests on gmail, and it works fine using this. :)
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub, or mute the thread.
|
|
Not my app, but thank you either way. 👍 - Sure love using it. |
|
Hi here ! Following up on @Renjaminino answer, you should add media queries on desktop version instead of mobile. Most of mobile client doesn't support media queries. So : @media only screen and (max-width: 480px) { *[class~=hide_on_mobile] { display: none !important;} }becomes : .hide_on_mobile { display: none !important;}
@media only screen and (min-width: 480px) { .hide_on_mobile { display: block !important;} } |
|
Hi Maxime
Thank you so much. Simple, elegant and has removed days of anxiety from my
life. Thank you again!!!
cheers
Jamie
…On Mon, Aug 7, 2017 at 10:20 AM, Maxime Brazeilles ***@***.*** > wrote:
Hi here !
Following up on @Renjaminino <https://github.com/renjaminino> answer, you
should add media queries on desktop version instead of mobile. Most of
mobile client doesn't support media queries.
And you can use a class selector instead of attribute selectors, some
clients doesn't support it
So :
@media only screen and (max-width: 480px) { *[class~=hide_on_mobile] { display: none !important;} }
becomes :
.hide_on_mobile { display: none ***@***.*** only screen and (min-width: 480px) { .hide_on_mobile { display: block !important;} }
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<#770 (comment)>, or mute
the thread
<https://github.com/notifications/unsubscribe-auth/AER74Pm6p4bnpFrIZhcwMG71QT-6li5Mks5sVtbugaJpZM4OsqAj>
.
|
|
@iRyusa - thanks for the clarification. I wasn't aware of that fix. Much appreciated. |
|
Hi
Thank you both for your help. However, to cover Android, all versions of
outlook and Yahoo explorer a lot more is needed. I have done a lot of
research now and I post it here to see if it helps you. First point is that
any items that are to be shown on desktop and hidden on mobile also need a
little inline style as well as the desktop class.
Below is the definitive way to show and hide in absolutely everything. My
css takes into account that MJML creates tables etc. There are little
things in my code, for example, !important needs to be right up against
some code to work in some versions of Yahoo...
<div style="max-height: 0; overflow: hidden; display: none;"
class="desktop">
<img alt="" width="50" src="
http://cdn.images.express.co.uk/img/static/comments/newshare/sh.png">
</div>
<div class="mobile">
<img alt="" width="20" src="
http://cdn.images.express.co.uk/img/static/comments/newshare/sh.png">
</div>
<style>
.mobile {
display: none;
max-width: 0px;
max-height: 0px;
overflow: hidden;
mso-hide: all;
}
.desktop {
display: block!important;
max-width: none!important;
max-height: none!important;
overflow: visible!important;
mso-hide: none !important;
-ms-overflow-style:-ms-autohiding-scrollbar;
}
tr.desktop {
display: table-row !important;
}
td.desktop {
display: table-cell !important;
}
@media all and (min-width: 481px) {
.desktop {
overflow: visible!important;
}
}
@media all and (max-width: 480px) {
.desktop {
display: none!important;
max-width: 0px!important;
max-height: 0px!important;
overflow: hidden!important;
mso-hide: all!important;
}
.mobile {
display: block!important;
max-width: 480px!important;
max-height: 1000px!important;
overflow: visible!important;
mso-hide: all!important;
}
.mobile td {
width: 100% !important;
display: block !important;
}
img.mobile {
display: initial !important;
}
.mobile.accessory-head {
display: block !important;
}
*[class~=desktop] { display: none!important;}
}
</style>
|
|
Well, it's just me, but I don't really like to have duplicate content in my email, because some clients could display both, but if it works for you then 👍 |
|
I agree with @iRyusa, and trust me @jamiefinlayson, I totally understand the frustrations with client compatibility, on mobile specifically. For me personally...on top of having the mailers work as best as possible on major platforms, you'll always have 1 or 2, or even 3 outliers. And honestly...that's okay, unless you're trying to find that magic unicorn, which is do-able, but difficult. My only problem with your code above, and mind you this is entirely subjective on my end is this: :) |
|
I think you are both right, however, my current client had an email that
was designed without this in mind so i just had to provide it! In the
future though I feel I definitely know enough now to convince them not to
do it!
cheers
Jamie
…On Tue, Aug 8, 2017 at 5:12 PM, Maxime Brazeilles ***@***.***> wrote:
Well, it's just me, but I don't really like to have duplicate content in
my email, because some clients could display both, but if it works for you
then 👍
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<#770 (comment)>, or mute
the thread
<https://github.com/notifications/unsubscribe-auth/AER74C8UZx4EDzfLkyw7uwkRF97WiPTUks5sWIjogaJpZM4OsqAj>
.
|
Is there support for hiding/revealing content blocks on mobile/desktop, taking into account Outlook, Gmail and Android?
The text was updated successfully, but these errors were encountered: