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
Bob 11Bob 11 

Make Lightning Component mobile friendly

I have a lightning component that is used in a customer community and needs to be updated so it is mobile friendly. I have not done this before and would like some help with updating my code below. Right now it does not render well at all. 
 
<aura:component implements="flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes,force:hasRecordId,flexipage:availableForRecordHome" access="global"
                controller="acme_fsl_AppointmentBooking">



    <aura:attribute name="debug" type="Boolean" default="false"/>

    <aura:attribute name="loading" type="Boolean" default="true"/>
    <aura:attribute name="showSpinner" type="Boolean" default="true"/>
    <aura:attribute name="isEligible" type="Boolean" default="true"/>
    <aura:attribute name="showError" type="Boolean" default="false"/>
    <aura:attribute name="errorMessage" type="String"/>
    <aura:attribute name="rowCount" type="Integer" default="4"/>
    <aura:attribute name="isOpen" type="boolean" default="false"/>


    <aura:attribute name="data" type="Object" default="{}"/>
    <aura:attribute name="slotList" type="List" default="[]"/>
    <aura:attribute name="allSlots" type="List" default="[]"/>
    <aura:attribute name="workOrderId" type="Id"/>
    <aura:attribute name="serviceAppointmentId" type="Id"/>
    <aura:attribute name="selectedDate" type="Date"/>
    <aura:attribute name="todayDate" type="Date"/>
    <aura:attribute name="currentUser" type="User"/>
	<force:recordData aura:id="recordLoader" recordId="{!$SObjectType.CurrentUser.Id}" fields="Account.BillingStreet, Account.BillingCity, Account.BillingState, Account.BillingCountry, Account.BillingPostalCode" targetFields="{!v.currentUser}"/> 
    <aura:handler name="init" value="{!this}" action="{!c.initCmpData}"/>
    <aura:handler name="change" value="{!v.selectedDate}" action="{!c.getFilterApptSlots}"/>
    <aura:if isTrue="{!v.debug}">
        Debug<br/>
        recId {!v.recordId}<br/>
        data {!v.data.slots.length}<br/>
        todayDate {!v.todayDate}<br/>
        selectedDate {!v.selectedDate}<br/>
        isEligible {!v.isEligible} <br/>
    </aura:if>

    <aura:if isTrue="{!v.loading}">
        <aura:if isTrue="{!v.showSpinner}">
            <lightning:spinner/>
        </aura:if>
        <aura:set attribute="else">
            <aura:if isTrue="{!v.isEligible}">
                <div class="cmpWrapper">
                    <lightning:layout multipleRows="true">
                        <lightning:layoutItem size="4" padding="around-small">
                            <span class="calWrapper">
                                
                                <center>
                                 
                                    <c:DatePicker aura:id="closeDate" label="Select a preferred appointment date to view availability"
                                                  placeholder="Date"
                                                  value="{!v.selectedDate}"
                                                  formatSpecifier="MM/dd/yyyy" />
                                </center>
                            </span>
                            
                            
                            <br/>
                             <aura:if isTrue="{!v.isEligible}">
                                 <center><br/>
            <div class="slds-float_leftX additionalOption slds-p-bottom_xx-small">
               <h2> Not seeing any results or can’t find an appointment that fits your needs? Contact us at (800) 422-5365.</h2>
                
            </div>
        </center>
        <br/>
            
    </aura:if>
    <center>
        <!-- removing create a case access-->
        <!-- <a href="./contactsupport">
            <lightning:button label="Create Case" variant="brand"/>
        </a> -->
    </center>
                    </lightning:layoutItem>
                        <lightning:layoutItem size="8" padding="around-small">
                            <span class="slotsWrapper">
                                <center>
                               
                                    <aura:iteration items="{!v.slotList}" var="slot" indexVar="i">
                                       <aura:if isTrue="{!(i > v.rowCount) == false}">
                                           
                                           
                                            <c:AdVic_BookingSlot slot="{!slot}" workOrderId="{!v.workOrderId}" serviceAppointmentId="{!v.serviceAppointmentId}"/>
                                        </aura:if>
                                       </aura:iteration>
                                    <lightning:button label="Display Additional Appointments" onclick="{!c.showMore}" variant="brand"/>
                                </center>
                            </span>
                        </lightning:layoutItem>
                    </lightning:layout>
                    
                    
                    
                    
                    
                    

                   
                </div>
                <aura:set attribute="else">
                    <lightning:icon iconName="utility:warning" alternativeText="Customer Not Eligible"
                                    variant="Warning" title="Not Eligible" class="notification-icon"/>
                    <aura:if isTrue="{!v.showError}">
                        <div id="error">
<!--                            <lightning:input value="{!v.errorMessage}" readonly="true"/>-->
                           
                        </div>
                        <aura:set attribute="else">
                            <br/>
                        </aura:set>
                    </aura:if>
                    <br/>
                    <span>{!v.errorMessage}</span>
                </aura:set>
            </aura:if>
        </aura:set>
    </aura:if>

    <br/>
    <br/>
   
</aura:component>


 
VinayVinay (Salesforce Developers) 
Hi Bob,

Check below references and list of components for mobile compatible.

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.mobile
https://salesforce.stackexchange.com/questions/228065/lightning-component-mobile-compatibility

Thanks,