Different styles for Desktop and Mobile.

[jay-softsages]

I need to give different styles for Desktop and Mobile.

I also referred to the link below -
GrapesJS/grapesjs#3056 (comment)
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!

[rogueturnip]

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.

[lechuhuuha]

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>

Try it live

[rogueturnip]

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).

1. is there a way to inject the mj-style on init of the editor? I found an init on load but it wasn't that clear how to use this. I want to have all the work with the styles to hide mobile or desktop
2. In the component settings is there a way to expose other elements, such as css-class? I was testing with the id and it doesn't work on all mjml elements but css-class does.

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!

[RakulAgn]

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>

Try it live

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

[mayankd2]

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).

1. is there a way to inject the mj-style on init of the editor? I found an init on load but it wasn't that clear how to use this. I want to have all the work with the styles to hide mobile or desktop
2. In the component settings is there a way to expose other elements, such as css-class? I was testing with the id and it doesn't work on all mjml elements but css-class does.

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!

@rogueturnip were you able to figure out the 2nd point?

[artf]

At the moment responsive styles are not supported and what @lechuhuuha suggested is the right path to follow to implement it by yourself.