Skip to main content

Connect #ZOOM with #Salesforce using #Zapier | Salesforce Tutorials

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 😊

Comments

Popular posts from this blog

How to send WhatsApp from Lightning Component Salesforce ?

Send WhatsApp from Lightning Component SalesforceHi folks, in this article I will explain how you can send WhatsApp from Lightning Component using https://wa.me/
In this example I will create a Quick Action button on Contact which will be connected with my Lightning Component.
Please follow the steps below : 
Step 1 : Create a Lightning Component & Apex as shown below
WhatsApp.cmp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30<aura:componentcontroller="Vlog_whatsappCTRL"implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"access="global"><aura:attributename="recordId"type="String"/><aura:attributename="con"type="Contact"/><aura:attributename="msg"type="String"/><aura:handlername="init"action…

Send WhatsApp and Save Chat using Lightning Component Salesforce | Salesforce Tutorials

Hello folks,
In this article you will learn to send WhatsApp and Save the Chat using Lightning Component Salesforce. 
Prerequisite : 
Create a custom object WhatsApp__c
Create custom fields as shown below : 


Please follow the code below : 

WhatsAppComponent 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30<aura:componentcontroller="Vlog_whatsappCTRL"implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"access="global"><aura:attributename="recordId"type="String"/><aura:attributename="con"type="Contact"/><aura:attributename="msg"type="String"/><aura:handlername="init"action="{!c.doInit}"value="{!this}"/><articleclass="slds-card"><divclass="slds-card__header…

Get Parent Id when overriding standard actions with a Lightning Component in salesforce1 app

How to Get Parent Id when overriding standard actions with a Lightning Component in salesforce1 app ?
In this blog I will explain how you can get Parent Id when overriding standard actions with a lightning component.
For example I have changed my Opportunity New button action with a custom Lightning Component. 
Let's create a new account and from the related tab try creating the new Opportunity. Have you noticed any change in URL ?
Let me share the URL with you :  _________________________________________________________________________ https://kapilbatra1-dev-ed.lightning.force.com/lightning/o/Opportunity/new?recordTypeId=0127F000000htlpQAA&additionalParams=accid%3D0017F00002S6g9H%26&inContextOfRef=1.eyJ0eXBlIjoic3RhbmRhcmRfX3JlY29yZFBhZ2UiLCJhdHRyaWJ1dGVzIjp7Im9iamVjdEFwaU5hbWUiOiJBY2NvdW50IiwicmVjb3JkSWQiOiIwMDE3RjAwMDAyUzZnOUhRQVIiLCJhY3Rpb25OYW1lIjoidmlldyJ9LCJzdGF0ZSI6e319&count=3 _________________________________________________________________________
In above URL you …