Open jay-softsages opened 1 year ago
I'm also very interested in this. What I'm looking to be able to do is hide elements on the mobile or desktop. The example might be, on desktop show an image but hide on mobile, or show a link to a mobile app in a mobile email client but hide that on a desktop client.
I'm also very interested in this. What I'm looking to be able to do is hide elements on the mobile or desktop. The example might be, on desktop show an image but hide on mobile, or show a link to a mobile app in a mobile email client but hide that on a desktop client.
Hey if you need that i think you can implement some kind of button when click will add this media query
@media only screen and (max-width: 480px) { *[class~=hide_on_mobile] { display: none !important;} }
and in the block you can add
<mj-column css-class="hide_on_mobile"> <mj-image src="http://www.google.com/google.png" padding="0" /> </mj-column>
Here is the original link https://github.com/mjmlio/mjml/issues/770#issuecomment-320038187
And the code that will work for mjml version > 3
<mjml>
<mj-head>
<mj-style>
@media (max-width:480px) {
#hidden {
display: none;
}
}
@media (max-width:480px) {
#mobile {
text-align: center;
}
}
</mj-style>
</mj-head>
<mj-body>
<mj-container>
<mj-section>
<mj-column background-color="#eee">
<mj-text>
<p id="hidden">Hidden on mobile</p>
<p id="mobile">Centered on mobile</p>
</mj-text>
</mj-column>
</mj-section>
</mj-container>
</mj-body>
</mjml>
Thanks for this. I'm new to GrapeJS so hopefully my follow up questions can be just directed to documentation (that I couldn't find).
My next step if I can get those two items figured out is figuring out how to make a custom button instead of raw "css-class" that was an option of "show mobile/show desktop/show all"
Thanks!
I'm also very interested in this. What I'm looking to be able to do is hide elements on the mobile or desktop. The example might be, on desktop show an image but hide on mobile, or show a link to a mobile app in a mobile email client but hide that on a desktop client.
Hey if you need that i think you can implement some kind of button when click will add this media query
@media only screen and (max-width: 480px) { *[class~=hide_on_mobile] { display: none !important;} }
and in the block you can add
<mj-column css-class="hide_on_mobile"> <mj-image src="http://www.google.com/google.png" padding="0" /> </mj-column>
Here is the original link mjmlio/mjml#770 (comment)
And the code that will work for mjml version > 3
<mjml> <mj-head> <mj-style> @media (max-width:480px) { #hidden { display: none; } } @media (max-width:480px) { #mobile { text-align: center; } } </mj-style> </mj-head> <mj-body> <mj-container> <mj-section> <mj-column background-color="#eee"> <mj-text> <p id="hidden">Hidden on mobile</p> <p id="mobile">Centered on mobile</p> </mj-text> </mj-column> </mj-section> </mj-container> </mj-body> </mjml>
Yeah We Can do this but the issue is once you did this it will reflect in the canvas incase if you hidden some components in the desktop you cant see that component again and also you cant set mediaQuery for mobile once hidden you need to revert back things and need to work
I need to give different styles for Desktop and Mobile.
I also referred to the link below - https://github.com/GrapesJS/grapesjs/issues/3056#issuecomment-702992062 but the responsive design feature is only applicable to the webpage plugin and not to the MJML plugin. Any idea how to achieve this or is this a feature that needs to be added? Please help!