fluid-on-mobile

[webthingz]

Hi All,
I was looking on the solition for image that are not displayed 100% width on mobile and find en article on fluid-on-mobile="true". Only what ever I try it is not working.

<mj-section>
      <!-- article 01 -->
      <mj-column>
        <mj-image fluid-on-mobile="true" src="{{artikel_1_afbeelding}}" />
        <mj-text font-size="16px" color="#333333" font-family="Roboto Slab, sans-serif" line-height="120%">
          <span style="font-weight: 400; color: #a5936e; font-style: italic"> Datum: {{artikel_1_datum}} <br /> Tijd: {{artikel_1_tijd}}
          </span>
          <br />
          {{artikel_1_tekst}}
          <br />
          <a style="color: #a5936e; text-decoration: underline; font-weight: 400" href="{{artikel_1_link}}">Meer informatie</a>
        </mj-text>
      </mj-column>

Any ideas?

Regards, Ziggy

[iRyusa]

Keep in mind if you have some padding it will be still remove from fluid-on-mobile.

Try reset the padding on section to 0.

[webthingz]

I'm sure i tried that but now it works. Arggg I think it's because of wintertime haha

[webthingz]

Unbelievable.. How is this possible that it is not working today! OMG what a stressfull assignment! I just promissed to send out the letter tomorrow :-/ Don;t understand why it worked when I just added the padding="0" and now the image is 2/3 of the screen again on gmail app on android. Outlook is working fine by the way

<mj-section padding="0">
      <!-- article 01 -->
      <mj-column>
        <mj-image fluid-on-mobile="true" src="{{artikel_1_afbeelding}}" />
        <mj-text font-size="16px" color="#333333" font-family="Roboto Slab, sans-serif" line-height="120%">
          <span style="font-weight: 400; color: #a5936e; font-style: italic"> Datum: {{artikel_1_datum}} <br /> Tijd: {{artikel_1_tijd}}
          </span>
          <br />
          {{artikel_1_tekst}}
          <br />
          <a style="color: #a5936e; text-decoration: underline; font-weight: 400" href="{{artikel_1_link}}">Meer informatie</a>
        </mj-text>
      </mj-column>
      <!-- article 02 -->
      <mj-column>
        <mj-image fluid-on-mobile="true" src="{{artikel_2_afbeelding}}" />
        <mj-text font-size="16px" color="#333333" font-family="Roboto Slab, sans-serif" line-height="120%">
          <span style="font-weight: 400; color: #a5936e; font-style: italic"> Datum: {{artikel_2_datum}} <br /> Tijd: {{artikel_2_tijd}}
          </span>
          <br />
          {{artikel_2_tekst}}
          <br />
          <a style="color: #a5936e; text-decoration: underline; font-weight: 400" href="{{artikel_2_link}}">Meer informatie</a>
        </mj-text>
      </mj-column>
      <!-- article 03 -->
      <mj-column padding="0">
        <mj-image fluid-on-mobile="true" src="{{artikel_3_afbeelding}}" />
        <mj-text font-size="16px" color="#333333" font-family="Roboto Slab, sans-serif" line-height="120%">
          <span style="font-weight: 400; color: #a5936e; font-style: italic"> Datum: {{artikel_3_datum}} <br /> Tijd: {{artikel_3_tijd}}
          </span>
          <br />
          {{artikel_3_tekst}}
          <br />
          <a style="color: #a5936e; text-decoration: underline; font-weight: 400" href="{{artikel_3_link}}">Meer informatie</a>
        </mj-text>
      </mj-column>
    </mj-section>