Responsiveness in MJML

Question

When using MJML to create the email templates, it provides the carousel feature in email templates. Here is the code from the their sample. (icon-width and tb-width were added by me)

<mj-carousel icon-width="30px" tb-width="20px">
   <mj-carousel-image src="https://www.mailjet.com/wp-content/uploads/2016/11/ecommerce-guide.jpg" />
   <mj-carousel-image src="https://www.mailjet.com/wp-content/uploads/2016/09/3@1x.png" />
   <mj-carousel-image src="https://www.mailjet.com/wp-content/uploads/2016/09/1@1x.png" />
</mj-carousel>

As you see, the attribute tb-width controls the width thumbnails of the carousel, I want to change the value of tb-width to be smaller when it goes into mobile screen, otherwise I will have to stick to one value cross all screen sizes.

I tried this:

@media all and (max-width: 480px) {
   [tb-width] {
      width: 50px !important;
   } // this is not working
}

Then I tried this based on the official document

@media all and (max-width: 480px) {
   div[style*="tb-width:20px;"] {
      width: 300px !important;
   }
}

None of above code works.

How do you guys solve this problem? Thanks in advance.

score 0 · Accepted Answer · answered May 11 '17 at 23:12

Thanks for @dermothghes from mjml slack channel, here is the solution:

All these mjml components will have a corresponded css class in the outputted HTML, what we need to do is to compile the .mjml file first and find the corresponded css class from the output.

In my question, this should work:

 @media all and (max-width: 480px) {
    .mj-carousel-thumbnail {
       width: 50px !important;
    }
 }

.mj-carousel-thumbnail is the generated class from mj-carousel-thumbnail mjml component.

Responsiveness in MJML

1 Answers1