search

mjmlio / mjml

MJML: the only framework that makes responsive-email easy
https://mjml.io
MIT License
16.9k stars 951 forks source link

Mobile customization issue. #2866

Closed Simonegallo92 closed 3 months ago

Simonegallo92 commented 3 months ago

Hi,

I have an issue with mobile optimizations.

In this part of the code :

<mj-section  background-color="#ffffff" padding-left="15px" padding-right="15px" padding-top="0" padding-bottom="30px">
      <mj-column width="50%">

        <mj-text font-weight="bold">Tech Lab</mj-text>
        <mj-text font-size="13px" color="black">  Lorem ipsum dolor sit amet consectetur
                                    adipisicing elit. Similique et placeat,
                                    magni odit laborum architecto fuga eos
                                    dolorem quaerat quos sunt id temporibus
                                    libero aspernatur adipisci in iure
                                    cupiditate dolore!</mj-text>

      </mj-column>
      <mj-column width="50%"> 
      <mj-image src="https://via.placeholder.com/640x360" ></mj-image>
      </mj-column>
      </mj-section>

        <mj-section  background-color="#ffffff" padding-left="15px" padding-right="15px" padding-top="0" padding-bottom="30px" css-class="centro">
      <mj-column width="50%">

       <mj-image src="https://via.placeholder.com/640x360" ></mj-image>

      </mj-column>
      <mj-column width="50%"> 

         <mj-text font-weight="bold">Startup</mj-text>
        <mj-text font-size="13px" color="black" padding-top="0">  Lorem ipsum dolor sit amet consectetur
                                    adipisicing elit. Similique et placeat,
                                    magni odit laborum architecto fuga eos
                                    dolorem quaerat quos sunt id temporibus
                                    libero aspernatur adipisci in iure
                                    cupiditate dolore!
      </mj-text>
      </mj-column>
      </mj-section> 

      <mj-section  background-color="#ffffff" padding-left="15px" padding-right="15px" padding-top="0">
      <mj-column width="50%">

        <mj-text font-weight="bold">Companies</mj-text>
        <mj-text font-size="13px" color="black">  Lorem ipsum dolor sit amet consectetur
                                    adipisicing elit. Similique et placeat,
                                    magni odit laborum architecto fuga eos
                                    dolorem quaerat quos sunt id temporibus
                                    libero aspernatur adipisci in iure
                                    cupiditate dolore!</mj-text>

      </mj-column>
      <mj-column width="50%"> 
      <mj-image src="https://via.placeholder.com/640x360" ></mj-image>
      </mj-column>
      </mj-section>

i have 3 sections, wich every one contain 2 text and 1 image like this

github

But in mobile version without display flex i don't know how to fix this layout

github2

i'm trying to add style to the @media rule but nothing work. should be like the first section "Tech Lab" with in the top the first text, then the second text and at the end the image. any advice for a noob?

thank you in advance

iRyusa commented 3 months ago

You can check with direction attribute on mj-section it will allow you to reverse the stacking order in mobile.

Keep in mind a sum of column in mj-section shouldn't be greater than 100%

Here you need to split into multiple section.

Simonegallo92 commented 3 months ago

ty ^^ I have another question, do you know what could be the problem with gmail? with every email provider the css work fine(outlook, yahoo, protonmail) with gmail is not right, I mean, is not bad, but it's not what it should be. I'm using thunderbird and gmail to test the code.

this is how it should be :

scrrentry

this is on Gmail :

Screenshot 2024-06-06 alle 10(1)