2

I have a Grid which has three columns:

<div class="slds-grid slds-wrap">
  <div class="slds-col slds-size_1-of-1 slds-large-size_4-of-12">
    <span>1</span>
  </div>
  <div class="slds-col slds-size_1-of-1 slds-large-size_4-of-12">
    <span>2</span>
  </div>
  <div class="slds-col slds-size_1-of-1 slds-large-size_4-of-12">
    <span>3</span>
  </div>
</div>

I want column 3 to disappear when viewed on a small screen (i.e. mobile device).

How would I achieve that using Salesforce Lightning Design System?

5

You can use a token for this, which also means modifying your code slightly.

CSS

@media t(mqSmall) {
    .THIS .nonEssential {
        display: none;
    }
}

cmp

<div class="slds-grid slds-wrap">
  <div class="slds-col slds-small-size_6-of-12 slds-size_1-of-1 slds-large-size_4-of-12">
    <span>1</span>
  </div>
  <div class="slds-col slds-small-size_6-of-12 slds-size_1-of-1 slds-large-size_4-of-12">
    <span>2</span>
  </div>
  <div class="slds-col nonEssential slds-size_1-of-1 slds-large-size_4-of-12">
    <span>3</span>
  </div>
</div>

defaultTokens.tokens

<aura:tokens extends="force:base">

</aura:tokens>

defaultTokens.tokens-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>41.0</apiVersion>
    <description>A Lightning Component Bundle</description>
</AuraDefinitionBundle>
  • Hell, thanks for this answer, I was so confused how to use media query token, its so non intuitive – user1974566 Jan 14 '19 at 10:14
  • 1
    @user1974566 The docs don't make it clear. I hope this helps out a lot of people. – sfdcfox Jan 14 '19 at 10:17
  • 1
    @Robs You need to create a defaultTokens.tokens file. You can do this in the Developer Console under (File > New > Lightning Tokens) that includes the default tokens (force:base). This additional edit should help. – sfdcfox Jan 14 '19 at 10:47
  • 1
    @Robs Yes, it's called defaultTokens, and there will be a meta.xml file as well. It has the same format as other meta.xml files. I'll edit. – sfdcfox Jan 14 '19 at 10:51
  • 1
    @Robs yes the files will be in force-app/main/default/aura/defaultTokens if you're using default configuration. It appears as a normal component, but has a different type of file from a normal component. – sfdcfox Jan 14 '19 at 10:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.