Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't make button left on desktop center on mobile

See original GitHub issue

Describe the bug Hey, I can’t make button left on desktop , center on mobile.

To Reproduce

  <mj-head>
  <mj-style>

        @media only screen and (max-width: 500px) {
            .hello {
                width: 200px !important;
            }
        }
  @media all and (max-width: 480px) {
        .align div {
          text-align: center!important;
  				align: center!important;
       
        }
  			
  			
      }
  
   @media all and (min-width: 480px) {
        
  			.balign td{
           align: left!important; 
        }
      }
  

  
  
  

    </mj-style>

  
  
  
  </mj-head>
  <mj-body>
    <!-- Side image -->
<mj-section background-color="white">

  <!-- Left image -->
  <mj-column>
    <mj-image width="250px" src="http://placekitten.com/200/300" />
  </mj-column>

  <!-- right paragraph -->
  <mj-column>
    <mj-text 
             font-size="28px"
             font-family="Roboto,Arial"
             color="#008BFF" align="left" padding-top="25px" css-class="align">
       <a href="www.wp.pl" style="text-decoration:none"> Lorem Ipsum is </a> 
      </mj-text>
    <mj-text 
             font-size="16px"
             font-family="Roboto,Arial"
             color="#18191A" align="left" font-weight="300" line-height="28px" css-class="align">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
      </mj-text>

      <mj-text font-size="13px"
             font-family="Roboto,Arial"
             color="#8894AB" align="left" font-weight="300" line-height="16px"  css-class="align" >
         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, b</mj-text>

     <mj-button font-family="Helvetica" background-color="#303F9F" color="white" padding-top="20px"  align="center" width="168px" height="35px"  font-size="16px" css-class="balign" >
         Read more
    </mj-button>
  </mj-column>
</mj-section>  
    
  </mj-body>
</mjml>``

Issue Analytics

State:
Created 5 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

1reaction

prateekagrwl05commented, Oct 14, 2019

@iRyusa @ProdigyMaster

Hi,

It is possible to do it using media queries. Just check this out below. This is working for me.

  <mj-head>
    <mj-style>
      @media all and (max-width: 480px) {
      	.im-mobile-center,
        .im-mobile-center table {
          text-align: center !important;
        }
        .im-mobile-center table {
          margin: 0 auto !important;
        }
      }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-section >
      <mj-column >
				<mj-button font-family="Helvetica" background-color="#f45e33" color="white" align="left" css-class="im-mobile-center" width="230px">
          Don't click me!
         </mj-button>
      </mj-column>
      <mj-column >
				<mj-button font-family="Helvetica" background-color="#f45e33" color="white" align="right" css-class="im-mobile-center" width="230px">
          Don't click me!
         </mj-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>```

0reactions

prateekagrwl05commented, Oct 14, 2019

I agree that this will work only with the clients that support media queries. I am getting a device coverage of 99%+ on EOA as of now with this solution.

But yes, I take your point.