How to hide Lightning Design System Grid item when screen is Small (>= 480px)

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?

asked 1 hour ago

Robs

1,731528

add a comment |

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?

asked 1 hour ago

Robs

1,731528

add a comment |

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?

asked 1 hour ago

Robs

1,731528

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?

lightning-design-system slds-grid

asked 1 hour ago

Robs

1,731528

asked 1 hour ago

Robs

1,731528

asked 1 hour ago

Robs

1,731528

asked 1 hour ago

Robs

1,731528

asked 1 hour ago

Robs

1,731528

add a comment |

1 Answer
1

active

oldest

votes

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>

edited 5 mins ago

answered 44 mins ago

sfdcfox

249k11192427

Hell, thanks for this answer, I was so confused how to use media query token, its so non intuitive

– user1974566
42 mins ago

1

@user1974566 The docs don't make it clear. I hope this helps out a lot of people.

– sfdcfox
40 mins ago

I am unable to deploy using SFDX, I get this error No TOKENS named markup://c:defaultTokens found

– Robs
17 mins ago

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
10 mins ago

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
6 mins ago

|
show 3 more comments

Your Answer

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "459"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f246497%2fhow-to-hide-lightning-design-system-grid-item-when-screen-is-small-480px%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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>

edited 5 mins ago

answered 44 mins ago

sfdcfox

249k11192427

Hell, thanks for this answer, I was so confused how to use media query token, its so non intuitive

– user1974566
42 mins ago

1

@user1974566 The docs don't make it clear. I hope this helps out a lot of people.

– sfdcfox
40 mins ago

I am unable to deploy using SFDX, I get this error No TOKENS named markup://c:defaultTokens found

– Robs
17 mins ago

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
10 mins ago

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
6 mins ago

|
show 3 more comments

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>

edited 5 mins ago

answered 44 mins ago

sfdcfox

249k11192427

Hell, thanks for this answer, I was so confused how to use media query token, its so non intuitive

– user1974566
42 mins ago

1

@user1974566 The docs don't make it clear. I hope this helps out a lot of people.

– sfdcfox
40 mins ago

I am unable to deploy using SFDX, I get this error No TOKENS named markup://c:defaultTokens found

– Robs
17 mins ago

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
10 mins ago

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
6 mins ago

|
show 3 more comments

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>

edited 5 mins ago

answered 44 mins ago

sfdcfox

249k11192427

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>

edited 5 mins ago

answered 44 mins ago

sfdcfox

249k11192427

edited 5 mins ago

answered 44 mins ago

sfdcfox

249k11192427

answered 44 mins ago

sfdcfox

249k11192427

answered 44 mins ago

sfdcfox

249k11192427

Hell, thanks for this answer, I was so confused how to use media query token, its so non intuitive

– user1974566
42 mins ago

1

@user1974566 The docs don't make it clear. I hope this helps out a lot of people.

– sfdcfox
40 mins ago

I am unable to deploy using SFDX, I get this error No TOKENS named markup://c:defaultTokens found

– Robs
17 mins ago

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
10 mins ago

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
6 mins ago

|
show 3 more comments

Hell, thanks for this answer, I was so confused how to use media query token, its so non intuitive

– user1974566
42 mins ago

1

@user1974566 The docs don't make it clear. I hope this helps out a lot of people.

– sfdcfox
40 mins ago

I am unable to deploy using SFDX, I get this error No TOKENS named markup://c:defaultTokens found

– Robs
17 mins ago

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
10 mins ago

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
6 mins ago

Hell, thanks for this answer, I was so confused how to use media query token, its so non intuitive

– user1974566
42 mins ago

@user1974566 The docs don't make it clear. I hope this helps out a lot of people.

– sfdcfox
40 mins ago

I am unable to deploy using SFDX, I get this error No TOKENS named markup://c:defaultTokens found

– Robs
17 mins ago

@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
10 mins ago

@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
6 mins ago

|
show 3 more comments

draft saved

draft discarded

Thanks for contributing an answer to Salesforce Stack Exchange!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Kdjykuj

How to hide Lightning Design System Grid item when screen is Small (>= 480px)

1 Answer
1

CSS

cmp

defaultTokens.tokens

defaultTokens.tokens-meta.xml

Your Answer

Post as a guest

1 Answer
1

1 Answer
1

CSS

cmp

defaultTokens.tokens

defaultTokens.tokens-meta.xml

CSS

cmp

defaultTokens.tokens

defaultTokens.tokens-meta.xml

CSS

cmp

defaultTokens.tokens

defaultTokens.tokens-meta.xml

CSS

cmp

defaultTokens.tokens

defaultTokens.tokens-meta.xml

Post as a guest

Popular posts from this blog

What other Star Trek series did the main TNG cast show up in?

Berlina muro

Berlina aerponto

How to hide Lightning Design System Grid item when screen is Small (>= 480px)

1 Answer 1

CSS

cmp

defaultTokens.tokens

defaultTokens.tokens-meta.xml

Your Answer

Sign up or log in

Post as a guest

Post as a guest

1 Answer 1

1 Answer 1

CSS

cmp

defaultTokens.tokens

defaultTokens.tokens-meta.xml

CSS

cmp

defaultTokens.tokens

defaultTokens.tokens-meta.xml

CSS

cmp

defaultTokens.tokens

defaultTokens.tokens-meta.xml

CSS

cmp

defaultTokens.tokens

defaultTokens.tokens-meta.xml

Sign up or log in

Post as a guest

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Popular posts from this blog

What other Star Trek series did the main TNG cast show up in?

Berlina muro

Berlina aerponto

1 Answer
1

1 Answer
1

1 Answer
1