Define SLDS small, medium cut-off

Question

I want to have responsive button sizes, and I am using SLDS to accomplish that.

Here is my HTML Code:

<aura:component controller="CreateTaskLightningController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

<lightning:card iconName="action:new_task" title="CREATE FOLLOWUP TASKS">



            <div class="slds-grid slds-wrap" style="text-align:center;width: 100%;">
                <div class="slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-6 slds-p-around_small" >
                <lightning:button aura:id="1" variant="brand" label="Tomorrow" title="Tomorrow" onclick="{! c.handleClick }" />
                </div>

                <div class="slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-6 slds-p-around_small">
                <lightning:button aura:id="7" variant="brand" label="1 Week" title="1 Week" onclick="{! c.handleClick }" />
                </div>

                <div class="slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-6 slds-p-around_small">
                <lightning:button aura:id="14" variant="brand" label="2 Weeks" title="2 Weeks" onclick="{! c.handleClick }" />
                </div>

                <div class="slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-6 slds-p-around_small">
                <lightning:button aura:id="30" variant="brand" label="1 Month" title="1 Month" onclick="{! c.handleClick }" />
                </div>

                <div class="slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-6 slds-p-around_small">
                <lightning:button aura:id="90" variant="brand" label="3 Months" title="3 Months" onclick="{! c.handleClick }" />
                </div>

                <div class="slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-6 slds-p-around_small">
                <lightning:button aura:id="180" variant="brand" label="6 Months" title="6 Months" onclick="{! c.handleClick }" />
                </div>
            </div>


</lightning:card>

The problem is that I would like the "medium" sizing rules to kick in earlier. Look at the following picture:

I was wondering if there is any way to prevent words in buttons to do the wrap text style and stay as a static one liner (hopefully to kick in the the medium size slds grid format), or is there any way to have the "medium" size rule kick in earlier?

This is ideally what it should look like earlier on when I shrink the page:

Thank you!

Answer 1

No, the small/medium/large cutoffs are defined by SLDS and cannot be adjusted. You could use slds-truncate to force the text to cut off, but other than that, you must make sure that there's enough space for the next, or make your components larger to accommodate.