1

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">
    <thead>
        <tr class="slds-text-title_caps">
            <th scope="col">
                <div title="Action">Action</div>                
            </th>
        </tr>
        ...
    </thead>
    <tbody>
    <tr>
       <td class="slds-text-align_right">
          <div>
              <button type="button" class="slds-button slds-button_brand">Save</button>
              <button type="button" class="slds-button slds-button_neutral">Auto Check</button>
          </div>
       </td>
    </tr>
    ...
    </tbody>
</table>

1 Answer 1

2

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 .