Skip to main content
2 of 2
added 148 characters in body
salesforce-sas
  • 24.5k
  • 5
  • 44
  • 79

Lightning-input label font size too small on mobile

I create a visual force page with a lightning web component form.

The problem I have is that the input labels are too small on a mobile.

The visual force page:

<apex:page showHeader="false" title="Request Quote">
    <apex:includeLightning />

    <div id="lightning" />

    <script>
        $Lightning.use("c:RequestQuoteApp", function() {
          $Lightning.createComponent("c:RequestQuoteWebComponent",
            {},
            "lightning",
            cmp => {}
          );
        });
    </script>
</apex:page>

The start html component:

<template>
    <div class="snackbar"></div>

    <div style="padding: 50px">
        <lightning-card title="Quote Request" icon-name="standard:quotes">
            <div class="slds-m-around_medium slds-form">
                <lightning-input label="First Name" placeholder="First Name" value={firstName} onchange={handleFirstNameChange} required></lightning-input>
                <div class="slds-form-element slds-form-element_horizontal">
                    <label class="slds-form-element__label" for="">First Name</label>
                    <div class="slds-form-elemet__control">
                        <lightning-input placeholder="First Name" value={firstName} onchange={handleFirstNameChange} required variant="label-hidden"></lightning-input>
                    </div>
                </div>

                <lightning-layout horizontal-align="spread" class="slds-wrap">
                    <lightning-layout-item padding="around-small" flexibility="grow" class="slds-large-size_4-of-12 slds-medium-size_12-of-12">
                        <label><abbr title="required" class="slds-required">*</abbr>First Name</label>
                    </lightning-layout-item>
                    <lightning-layout-item padding="around-small" flexibility="grow" class="slds-large-size_8-of-12 slds-medium-size_12-of-12">
                        <lightning-input placeholder="First Name" value={firstName} onchange={handleFirstNameChange} required variant="label-hidden"></lightning-input>
                    </lightning-layout-item>

I'm finding LWC a bit of a let down for this purpose.

Vincent
  • 174
  • 2
  • 11