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

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ margin-bottom:0;
}

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 Jan 14 at 9:53

Robs

2,486642

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 Jan 14 at 9:53

Robs

2,486642

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 Jan 14 at 9:53

Robs

2,486642

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 Jan 14 at 9:53

Robs

2,486642

asked Jan 14 at 9:53

Robs

2,486642

asked Jan 14 at 9:53

Robs

2,486642

asked Jan 14 at 9:53

Robs

2,486642

asked Jan 14 at 9:53

Robs

2,486642

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 Jan 14 at 10:52

answered Jan 14 at 10:12

sfdcfox

266k13212459

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

– user1974566
Jan 14 at 10:14

1

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

– sfdcfox
Jan 14 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 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 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 at 10:56

|
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 Jan 14 at 10:52

answered Jan 14 at 10:12

sfdcfox

266k13212459

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

– user1974566
Jan 14 at 10:14

1

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

– sfdcfox
Jan 14 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 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 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 at 10:56

|
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 Jan 14 at 10:52

answered Jan 14 at 10:12

sfdcfox

266k13212459

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

– user1974566
Jan 14 at 10:14

1

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

– sfdcfox
Jan 14 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 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 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 at 10:56

|
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 Jan 14 at 10:52

answered Jan 14 at 10:12

sfdcfox

266k13212459

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 Jan 14 at 10:52

answered Jan 14 at 10:12

sfdcfox

266k13212459

edited Jan 14 at 10:52

answered Jan 14 at 10:12

sfdcfox

266k13212459

answered Jan 14 at 10:12

sfdcfox

266k13212459

answered Jan 14 at 10:12

sfdcfox

266k13212459

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

– user1974566
Jan 14 at 10:14

1

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

– sfdcfox
Jan 14 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 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 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 at 10:56

|
show 3 more comments

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

– user1974566
Jan 14 at 10:14

1

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

– sfdcfox
Jan 14 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 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 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 at 10:56

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

– user1974566
Jan 14 at 10:14

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

– sfdcfox
Jan 14 at 10:17

@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 at 10:47

@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 at 10:51

@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 at 10:56

|
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

搜尋此網誌

Xrfgtjtk

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

Bressuire

Cabo Verde

Gyllenstierna

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

Bressuire

Cabo Verde

Gyllenstierna

1 Answer
1

1 Answer
1

1 Answer
1