MJML <mj-attributes>の応答性

Question

MJMLを使用して電子メールテンプレートを作成すると、電子メールテンプレートにカルーセル機能が提供されます。ここにサンプルからのコードがあります。 （icon-widthとtb-width私が追加された）

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

見ての通り、カルーセルの幅サムネイルを制御tb-width属性は、私がそうでなければ、それは携帯電話の画面に移行したときに小さいことがtb-widthの値を変更したいですすべての画面サイズを横切る1つの値に固執する必要があります。

私はこの試みた：その後、私は上記のコードの作品のofficial document

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

なしに基づいてこれを試してみました

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

を。

この問題をどうやって解決しますか？前もって感謝します。 mjmlたるみチャンネルから@dermothghesため

Answer 1

おかげで、ここでのソリューションです：

これらのすべてのmjmlのコンポーネントが出力HTMLで対応付けられCSSクラスを持つことになります、私たちは何をする必要があるかをコンパイルすることです。 mjmlファイルを開き、出力から対応するcssクラスを見つけます。

私の質問では、この作業をする必要があります：

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

.mj-carousel-thumbnailはmj-carousel-thumbnail mjmlコンポーネントから生成されたクラスです。