fluid-on-mobile #2913

webthingz · 2024-10-27T13:38:02Z

webthingz
Oct 27, 2024

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 · 2024-10-27T16:20:24Z

iRyusa
Oct 27, 2024
Maintainer

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.

2 replies

webthingz Oct 27, 2024
Author

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

webthingz Oct 28, 2024
Author

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>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fluid-on-mobile #2913

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 2 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

fluid-on-mobile #2913

Uh oh!

Uh oh!

webthingz Oct 27, 2024

Replies: 1 comment · 2 replies

Uh oh!

iRyusa Oct 27, 2024 Maintainer

Uh oh!

webthingz Oct 27, 2024 Author

Uh oh!

Uh oh!

webthingz Oct 28, 2024 Author

webthingz
Oct 27, 2024

Replies: 1 comment 2 replies

iRyusa
Oct 27, 2024
Maintainer

webthingz Oct 27, 2024
Author

webthingz Oct 28, 2024
Author