I have developed a Visualforce page and I have put it in a force.com site. I have added the <apex:slds /> to my code to make it mobile responsive but it is mobile responsive only in the VF page and not in force.com site. By mobile responsive, what I mean is when you open Chrome and load the force.com site, the fields should adjust to the phone layout which is not happening at the moment. Can you please give me suggestions/recommendations on overcoming this issue?
VF Code:
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<head>
<apex:slds />
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<title>SLDS ResponsiveDesign Visualforce Page in Salesforce Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<apex:slds />
</head>
<body>
<div class="slds-scope" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
.mystyle {
color: black;
font-size: 18px;
font-weight: bold;
}
body .bPageBlock .pbBody .red .pbSubheader{
background-color:#585858;
}
body .bPageBlock .pbBody .grey .pbSubheader{
background-color:#585858;
}
body .bPageBlock .pbBody .grey .pbSubheader h3{
color:#FFFFFF;
}
.grey
{
background-color:white;
}
</style>
<apex:form id="theform" >
<apex:pageBlock id="section1" >
<apex:outputPanel id="errmsg">
<apex:pageMessages />
</apex:outputPanel>
<div class = "mystyle">
Cleaning Activities
</div>
<apex:outputPanel styleClass="grey" layout="block">
<apex:pageBlockSection title="Login" collapsible="false">
<apex:inputField value="{!cle.Password__c}">
<apex:actionSupport event="onchange" action="{!assignPassword}" reRender="CleaningSection" />
</apex:inputField>
</apex:pageBlockSection>
</apex:outputPanel>
<div align = "center">
<apex:commandButton styleClass="slds-button slds-button--brand" value="Retrieve Cleaning Activities" action="{!retrieve}" />
</div>
<apex:outputPanel id="CleaningSection" styleClass="grey" layout="block">
<apex:pageBlockSection columns="2" title="Cleaning Activity" id="section1" collapsible="false">
<apex:inputField value="{!cle.Operation__c}" required="false"/>
<apex:inputField value="{!cle.Cleaning_Company__c}" />
<apex:inputField value="{!cle.PTW_Number__c}"/>
<apex:inputField value="{!cle.Water_Usage_in_litres__c}"/>
<apex:inputField value="{!cle.Date_of_Cleaning__c}"/>
<apex:inputField value="{!cle.Cleaning_End_Date__c}"/>
<apex:inputField value="{!cle.Dry_Cleaning__c}"/>
<apex:inputField value="{!cle.Full_Site_Cleaning__c}"/>
<apex:inputField value="{!cle.Specific_Size_Cleaned_kWp__c}"/>
<apex:inputField value="{!cle.Status__c}"/>
<apex:inputField value="{!cle.URL_of_Photos_folder__c}"/> <br/>
<apex:inputField value="{!cle.Start_Time__c}" type="time" />
<apex:inputField value="{!cle.End_Time__c}" type="time"/>
<apex:inputField value="{!cle.Number_of_Workers__c}"/>
<apex:inputField value="{!cle.Hours_to_Deduct__c}"/>
</apex:pageBlockSection>
</apex:outputPanel>
<div align="center">
<apex:commandButton styleClass="slds-button slds-button--brand" value="Save Cleaning Activity" action="{!save1}" >
<apex:param name="buttonId1" value="button1" assignTo="{!paramValue}"/>
</apex:commandButton>
</div>
</apex:pageBlock>
<apex:pageBlock id="section2">
<apex:outputPanel styleClass="grey" layout="block">
<apex:pageBlockSection columns="2" title="Permit to Work Number" collapsible="false">
<apex:inputField value="{!ptw.Id}" />
<apex:inputField value="{!ptw.Cleaning_Activity__c}" />
<apex:inputField value="{!ptw.PTW_Number1__c}" required="false" />
<apex:inputField value="{!ptw.Number_of_Workers__c}"/>
<apex:inputField value="{!ptw.Date__c}"/>
<apex:inputField value="{!ptw.Start_Time__c}" type="time"/>
<apex:inputField value="{!ptw.End_Time__c}" type="time"/>
<apex:inputField value="{!ptw.Hours_to_Deduct__c}"/>
</apex:pageBlockSection>
</apex:outputPanel>
<div align="center">
<apex:commandButton styleClass="slds-button slds-button--brand" value="Save Permit to Work Number" action="{!save1}" reRender="errmsg">
<apex:param name="buttonId2" value="button2" assignTo="{!paramValue}"/>
</apex:commandButton>
<apex:commandButton styleClass="slds-button slds-button--brand" value="Reset PTW" action="{!refresh}" />
</div>
</apex:pageBlock>
<apex:pageBlock mode="inlineEdit" >
<div style="width:800px; margin:0 auto;">
<apex:pageBlockButtons location="top" >
<apex:commandbutton value="Update" styleClass="slds-button slds-button--brand" action="{!saveInlineEdit}"/>
</apex:pageBlockButtons>
</div>
<apex:pageBlockTable value="{!clelist}" var="a" id="tableBlock" style="width:130%" rendered="true">
<apex:column headerValue="Ticket Number">
<apex:outputLink value="https://c.ap2.visual.force.com/apex/Record_detail_Vf_Page?id = {a.Cleaning_Activity__c}">{!a.Name}</apex:outputLink>
</apex:column>
<apex:column headerValue="Contractor">
<apex:outputField value="{!a.Cleaning_Company__c}"/>
</apex:column>
<apex:column headerValue="Number of Workers">
<apex:outputField value="{!a.Number_of_Workers__c}"/>
</apex:column>
<apex:column headerValue="Operation Name" value="{!a.Operation__c}"/>
<apex:column headerValue="Start Date" value="{!a.Date_of_Cleaning__c}"/>
<apex:column headerValue="End Date" value="{!a.Cleaning_End_Date__c}"/>
<apex:column headerValue="PTW Number" value="{!a.Permit_to_Work_Number__c}"/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:form>
</div>
</body>
</html>
