function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Brian RichardsonBrian Richardson 

Lightning text size

Hello,

Having trouble finding the right SLDS style or layout to prevent the reduction of text/font size when a simple Lightning Component is displayed in mobile vs. standard layout. Using Chrome developer tools to view the results, as follows:

Responsive (mobile):
User-added image
Toggling the device toolbar:
User-added image

So, in responsive mode the text and controls are hard to use on a phone, as the table scales way down. I guess what I'm asking is, how do I turn off "responsiveness"? I'd like the component to display large text and controls as in the 2nd PNG.

My component table:

<table class="slds-table slds-table_bordered slds-table_cell-buffer">
        <thead>
        <tr class="slds-text-title_caps">
            <th scope="col">
                <div class="slds-truncate" title="Table">Table Header</div>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td data-label="Skill">
                <div class="slds-truncate">
                    <c:customLookup aura:id="lookupSkill" objectAPIName="Expertise__c" selectedRecord="{!v.selectedSKill}" label="Skill"/>
                </div>
            </td>
        </tr>
        <tr>
            <td data-label="Skill">
                <div class="slds-truncate">
                    <lightning:input name="liCapability" label="Capability" type="text" value="{!v.selectedCapability}"/>
                </div>
            </td>
        </tr>
        <tr>
            <td data-label="Contact">
                <div class="slds-truncate">
                    <lightning:input type="date" label="Start Date" name="startDate" aura:id="startDate" value="{!v.startDate}"/>
                </div>
            </td>
        </tr>
        <tr>
            <td data-label="Contact">
                <div class="slds-truncate">
                    <ui:button label="Submit" press="{!c.submitForm}"/>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
Hoping this is a dumb question with a simple answer :)

Thanks,
BR
Zuinglio Lopes Ribeiro JúniorZuinglio Lopes Ribeiro Júnior
Hello Brian,

If it is really necessary, you can create your custom CSS and use media queries to override the way Salesforce controls the responsiveness of their fonts. Take a look at this article: https://css-tricks.com/snippets/css/fluid-typography/

If you do not want to get so far, another way to do it is to set the font-size using an absolute value such as pixels. All you have to do is to create your custom CSS and set a selector to use an absolute value. 

See the examples below:
.THIS {
   font-size: 18px;
}

OR

.THIS .my-custom-class {
   font-size: 18px;
}

Keep in mind that using absolute values can affect the user experience. 

Hope to have helped!

Regards.

Don't forget to mark your thread as 'SOLVED' with the answer that best helps you.