How to let the image being resposive(fill container width) between mobile and desktop?

[HackettLai]

My card is currently coded as follows. The issue I'm experiencing is that when resizing, the image within the card doesn't fill up the available space. Instead, it behaves as though it has reached a maximum size at a certain point. Could you advise me on how to resolve this?

<!--Card-->
      <mj-column width="50%" mj-class="card-padding">
        <mj-image src="https://www.lcsd.gov.hk/CE/CulturalService/Programme/enewsletter/20241031/images/prog1764.jpg" href="https://www.lcsd.gov.hk/CE/CulturalService/Programme/tc/multi_arts/programs_1764.html"></mj-image>
        <mj-table width="100%">
          <tr class="card-base">
            <td class="card-info">
              <mj-text class="card-info-text">「冬日開懷集」系列：盞鬼劇團《詼諧曲》(荷蘭)</mj-text>
            </td>
            <td class="card-btn-space">
              <a href="https://www.lcsd.gov.hk/CE/CulturalService/Programme/tc/multi_arts/programs_1764.html" class="card-btn">詳情</a>
            </td>
          </tr>
        </mj-table>
      </mj-column>
      <!--End of Card-->

and below are the class I 've used:

<mj-class name="card-padding" padding="10px"></mj-class>
<mj-style inline="inline"> 
.card-base{background-color:#E3E2E0; height:80px;}
.card-info{padding:0px 10px} 
.card-info-text{font-size:14px; line-height:20px; letter-spacing:0.4px} 
.card-btn-space{width:60px; padding-right:10px}
}</mj-style>

[HackettLai]

When I exported the MJML and inspected the HTML, I noticed that a td element was unexpectedly set to a fixed width of 360px. How can I override this to achieve the desired styling?

[AumGupta]

Why is your mj-column width set to 50%?

[HackettLai]

Why is your mj-column width set to 50%?

I want to display two columns in a row by default and have it shrink down to one column on mobile devices. I initially thought this was the correct way to achieve responsiveness. Could you guide me on how to implement this effectively?

[AumGupta]

Try adding the fluid-on-mobile attribute to true in the mj-image tag.

[HackettLai]

Try adding the fluid-on-mobile attribute to true in the mj-image tag.

WOW you safe my life~ its worked! Thxxxxx

[AumGupta]

Happy to Help! 👍