Responsive Padding / Media Query issue

[ecmahutte]

Describe the bug I'm trying to create responsive padding for an e-mail template. When creating the code below:

<mj-style>
      /* Global Padding Styles - Mobile First */
      .sidePadding0 {padding:0 !important;}
      .sidePadding1 {padding:0 16px !important;}
      .sidePadding2 {padding:0 32px !important;}
      .sidePadding3 {padding:0 64px !important;}
      /* Global Padding Styles - Desktop */
      @media all and (min-width:480px) {
      .sidePaddingMd0 {padding:0 !important;}
      .sidePaddingMd1 {padding:0 16px !important;}
      .sidePaddingMd2 {padding:0 32px !important;}
      .sidePaddingMd3 {padding:0 64px !important;}
      }
</mj-style>

and applying a mobile and 'desktop' class ( sidePadding1 sidePaddingMd3 ) to the block

<!-- Hero Section -->
    <mj-hero mode="fluid-height" background-width="600px" background-height="380px" background-url="https://litmus-builder.s3.amazonaws.com/7f0b8170-7f15-480b-80af-bf08c9c0353a" background-color="#2a3448" vertical-align="bottom">
      <mj-text color="white" mj-class="HeadingFont" css-class="headingGridLine sidePadding1 sidePaddingMd3">
        <h1 style="display:inline-block;">
          <span style="color:white; background-color:#041E42;">Headline1</span>
          <span style="color:white; background-color:#041E42;">Headline2</span>
          <span style="color:white; background-color:#0077C8;">Headline3</span>
        </h1>
      </mj-text>
    </mj-hero>
<!-- End Hero Section -->

In the Visual Code (with MJML-extension) preview the responsive layout seems to work but when using the copied HTML in Litmus and testing the email there is no responsive padding. When inspecting the preview in Litmus it seems as if the default (mobile) padding is added inline which causes the MQ-styling to be overwritten:

Could someone tell me if I'm doing something wrong of if this is a known bug or missing feature?

[iRyusa]

Hi !

Make sure to uncheck the "inline css" in Litmus as MJML already take care of it and you should be fine. Keep in mind some email client won't support media queries.

[ecmahutte]

Thanks, this did the trick! And will keep it in mind ;)