4

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?

2 Answers 2

7

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>
8
  • Hell, thanks for this answer, I was so confused how to use media query token, its so non intuitive Commented Jan 14, 2019 at 10:14
  • 1
    @user1974566 The docs don't make it clear. I hope this helps out a lot of people.
    – sfdcfox
    Commented Jan 14, 2019 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
    Commented Jan 14, 2019 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
    Commented Jan 14, 2019 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
    Commented Jan 14, 2019 at 10:56
0

Also worth noting that SLDS supports Responsive visibility classes -

Responsive visibility classes will hide content on specific breakpoints. slds-show_[breakpoint] renders display: none when the the view port width is smaller than the breakpoint, and does nothing if it is bigger or equal. slds-hide_[breakpoint] does the opposite by rendering display: none when the the viewport width is bigger or equal than the breakpoint, and does nothing if it is smaller.

Example:

<div class="slds-hide_x-small">
    Hidden on screens with more than 320px width
</div>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .