CSS to use different font size in Salesforce1 and Lightning Component.

CSS to use different font size in Salesforce1 and Lightning Component.

In one of my lightning component I was having requirement of different font size and styling while client access the component from Salesforce1 App.

I found a very easy and interesting solution for this. I decide to use media queries to solve this.

Open style section in your lightning component and paste the following code in it :-


@media screen and (min-width: 601px) {
  .THIS .example {
    font-size: 80px;
  }}

/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
  .THIS .example {
    font-size: 30px;
  }}

After pasting the css in style apply the css example in your label/font tag. This media query works with the screen size. So whenever the lightning component will get open in salesforce1 app so the browser width will be <= 600px. Hence it will apply 2nd css.

Let me know if this post helps you somehow and do share it with your friends 😊