I have some table written in Salesforce Lightning Design System. There are two buttons in leftmost column of each row, and I want to make these buttons smaller in mobile media.

Fragment of HTML.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked-horizontal slds-table_col-bordered">
        <tr class="slds-text-title_caps">
            <th scope="col">
                <div title="Action">Action</div>                
       <td class="slds-text-align_right">
              <button type="button" class="slds-button slds-button_brand">Save</button>
              <button type="button" class="slds-button slds-button_neutral">Auto Check</button>

1 Answer 1


Responsive Does not mean that your elements will become smaller. A web responsive design basically means that your DOM will adapt/re-arange itself according to screensize/device that is being used (amongst other things)

Normally, SLDS is Responsive OOTB, what you are trying to achieve is a custom functionality.

You should be able to easily achieve this with Media queries and CSS.

For Example, using slds-size_x-of-x on your button accoridng to device/zcreensize will change the size of the button.

you can also explicitly specify a size using CSS units of measuring

You must log in to answer this question.

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