How can set an image inline with a header?

[Kur1z]

Hi, I was wondering how can I solve this issue that I am having with making an image inline with a header. I have tried a couple of different methods but I hope someone can point me to the correct one. Thank you in advance.

Goal:

So I have tried a couple of different methods:

First Method

 <mj-section border-bottom="3px solid #0074D0">

      <mj-column>
        <mj-table color="#0074D0" font-size="20px" font-family="calibri, sans-serif">
          <tr>
            <td width="80%">
              <mj-text align="center">
                <h2> Company 4<sup>th</sup> Quarter Quoting Palooza!</h2>
              </mj-text>
            </td>
            <td width="20%" style = "line-height:1;">
               <img  src="./Bind Email Blast/palooza.png" />
            </td>

          </tr>
        </mj-table>





      </mj-column>

    </mj-section>

My problem with the above method is that it if you change the image size in the img tag it does not grow and you have to resize the actual image size which causes a loss in quality. Also how can I get the bottom border closer to the text and image? I also wanted the text to be slightly bigger but it keeps breaking to the next line if I go any bigger.

Second Method

<mj-section border-bottom="3px solid #0074D0">

      <mj-column vertical-align="middle">
    
         
              <mj-text align="center" color="#0074D0"  font-family="calibri, sans-serif">
                <h1> Company 4<sup>th</sup> Quarter Quoting Palooza!</h1>
              </mj-text>


      </mj-column>
      <mj-column vertical-align="middle">

      
               <mj-image align= right width="100px" src="./Bind Email Blast/palooza.png" />
        
      </mj-column>
    </mj-section>

so now I can actually resize the image but now the text breaks and it is way too far from the image.

[iRyusa]

You can just specify the width on column instead to what you want. You can specify it in % or in px as you want.

…

On Thu, Nov 30, 2023 at 7:35 PM Kur1z ***@***.***> wrote: Hi, I was wondering how can I solve this issue that I am having with making an image inline with a header. I have tried a couple of different methods but I hope someone can point me to the correct one. Thank you in advance. Goal: image.png (view on web) <https://github.com/mjmlio/mjml/assets/73048850/f8d7b3f8-594b-4ad6-9e77-a07e740c8f98> So I have tried a couple of different methods: First Method <mj-section border-bottom="3px solid #0074D0"> <mj-column> <mj-table color="#0074D0" font-size="20px" font-family="calibri, sans-serif"> <tr> <td width="80%"> <mj-text align="center"> <h2> Company 4^th Quarter Quoting Palooza!</h2> </mj-text> </td> <td width="20%" style = "line-height:1;"> <img src="./Bind Email Blast/palooza.png" /> </td> </tr> </mj-table> </mj-column> </mj-section> image.png (view on web) <https://github.com/mjmlio/mjml/assets/73048850/b4cd737c-400b-409b-a53e-a74dd76664e7> My problem with the above method is that it if you change the image size in the img tag it does not grow and you have to resize the actual image size which causes a loss in quality. Also how can I get the bottom border closer to the text and image? I also wanted the text to be slightly bigger but it keeps breaking to the next line if I go any bigger. Second Method <mj-section border-bottom="3px solid #0074D0"> <mj-column vertical-align="middle"> <mj-text align="center" color="#0074D0" font-family="calibri, sans-serif"> <h1> Company 4^th Quarter Quoting Palooza!</h1> </mj-text> </mj-column> <mj-column vertical-align="middle"> <mj-image align= right width="100px" src="./Bind Email Blast/palooza.png" /> </mj-column> </mj-section> image.png (view on web) <https://github.com/mjmlio/mjml/assets/73048850/50907619-6d5d-4b12-ba9b-538c52e5ba6e> so now I can actually resize the image but now the text breaks and it is way too far from the image. — Reply to this email directly, view it on GitHub <#2783>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAELHTOSIZ5YAFW3NZPPIT3YHDGW3AVCNFSM6AAAAABABUXGL2VHI2DSMVQWIX3LMV43ERDJONRXK43TNFXW4OZVHEYTANRYGI> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>