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.