0

I'm trying to "hide" the wrapper "" on mobile screens, not by actually hiding it or "not displaying it", but by setting the padding to 0px. My initial approach was to use media queries, but my attempts have failed.

Below is the styling for the media query:

<mj-head>
  <mj-style>
    .wrapper-fix div {
        padding: 0px 50px !important;
    }
    @media only screen and (max-width: 480px){
      .wrapper-fix div {
        padding: 0px 0px !important;
        }
    }
  </mj-style>
</mj-head>

And below is the wrapper:

<mj-wrapper css-class="wrapping-fix" background-color="#fff">
  <mj-include path="./somecontent.mjml" />
</mj-wrapper>

The approach above doesn't work. My understanding is that the 50/0px are added to tags after inlining - the actual html content for the email. The doesn't really exist there.

Did anyone manage to do something like this? How can it be solved? Are there any alternatives?

Marcus Persson
  • 373
  • 4
  • 20
  • Don't know much about mjml but setting a padding to 0 to hide an element seems odd. – Brainfeeder Apr 23 '18 at 13:53
  • I don't want to "hide" the element as such. The wrapper adds padding on the left and right side of the main content, which looks nice on a big screen. However, on a mobile/small screen the content would be cramped on the center on the screen, leaving unused space on the sides. I can't actually "hide" the wrapper because then I would hide the content as well. So I figured that there must be a way to just set the padding to 0px on a mobile/small screen. – Marcus Persson Apr 23 '18 at 16:59
  • Your css says wrapper-fix but your class name is wrapping-fix. – Magnum26 Mar 12 '19 at 11:08

0 Answers0