Mjml: Targeting MJML elements in media queries

[mjml1982]

Hi,
I have three columns and i set its left and right border to 2px solid color but when i try to hide it for mobile in media queries its not working, i added the css-class in mj-column element.

Here is my code, please help how i can hide the border style and please specify how we can target the MJML elements in the media quires.

@media (max-width:480px) {
.col {border-left:0px !important;}
.col a {border-left:0px !important;}
}

  <mj-section  width="600px" background-color="#ffffff" margin="0 0 0 0" padding="30px 0 10px 0">  
    <mj-column css-class="col"  width="200px" padding="0 0 0 0" border-right="2px solid #000000" border-left="2px solid #000000">
      <mj-text 
        font-family="Raleway, Arial" 
        font-size="14px" 
        color="#000000" 
        align="center" 
        font-weight="bold" 
        line-height="140%"
        padding="0 0 0 0">
         <a href="#" class="link-nostyle"> STORE LOCATOR </a>
      </mj-text>
    </mj-column>
</mj-section>

Expected behavior:

I want to hide the left and right border of the column on mobile devices.

MJML version:

[4.0]

[ngarnier]

The css-class attribute is targeting the parent HTML element rendered from the MJML it's applied on (we can't know which element you actually want to target). It means you sometimes need to manually target the right element, which is the case here.

Also note that the support for media queries is better on desktop than on mobile, so you should rather have a default behaviour for mobile and use media queries to change it on desktop.

Something like that:

<mjml>
  <mj-head>
    <mj-style>
      @media (min-width:480px) { 
        .col td {
          border-left:2px solid black!important;
          border-right:2px solid black!important;
        }
      }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-section background-color="#ffffff" margin="0" padding="30px 0 10px 0">
      <mj-column css-class="col" width="200px" padding="0">
        <mj-text font-family="Raleway, Arial" font-size="14px" color="#000000" align="center" font-weight="bold" line-height="140%" padding="0">
          <a href="#" class="link-nostyle"> STORE LOCATOR </a>
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Try it live: https://mjml.io/try-it-live/SJaGwBNpG

[dougfabris]

Amazing solution @ngarnier thanks for share!

[gbiryukov]

the solution is not really amazing because it breaks mjml abstraction and makes developer care about implementation of mjml style properties.
and if this implementation will change one day such responsive styles will break.

it would be great to have first-class support for responsive styles built into mjml

[iRyusa]

The structure hasn't really change from first MJML version. At least you don't have to learn a whole new way to built media query where we expect users to have basic knowledge of CSS when you want to play with media queries.

[danielhiskio]

Hi there! I've just started using mjml and it's been perfect so far , however i encountered a problem of media query (ex.font-size and padding)working in my localhost and outlook but not in Gmail and i'm super confused .... tried tons of methods and read different articles but still not able to find any solution, I'm curious what could possibly be the problem then?
The following code is how i write my media query, hope i did not make any stupid mistakes
Thanks in advance!!

<mj-section css-class="hero" border-radius="6px 6px 0 0" background-url="https://edm.hiskio.com/source/5f1f8fd759c53/header-review-invitation.png?1598142059102" background-repeat="no-repeat" background-size="cover" > <mj-column vertical-align="middle"> <mj-text css-class="title" vertical-align="middle" padding-top="16px" align="center" font-size="18px" color="#262626" font-weight="bold" > Company Name </mj-text> </mj-column> </mj-section>

` @media (min-width:480px) {
.title {
padding-top:42px !important;
font-size:48px !important;

    }`

[dougfabris]

hey @danielhiskio I suggest you when working with media-queries in mjml to inspect the elements to see if the css is applying in the correct element. In your case you should apply the css properties in one level deeper on the div inside of .title, like this:

<mjml>
  <mj-head>
    <mj-style>
      @media (min-width:480px) { 
        .title div {
          padding-top:42px !important;
      font-size:48px !important;
        }
      }
    </mj-style>
  </mj-head>

  <mj-section css-class="hero" border-radius="6px 6px 0 0" background-url="https://edm.hiskio.com/source/5f1f8fd759c53/header-review-invitation.png?1598142059102" background-repeat="no-repeat" background-size="cover" > 
      <mj-column vertical-align="middle"> 
           <mj-text css-class="title" vertical-align="middle" padding-top="16px" align="center" font-size="18px" color="#262626" font-weight="bold" > Company Name </mj-text> 
          </mj-column> 
      </mj-section>
</mjml>