function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Swetha A 5Swetha A 5 

Need help on media css query

Hi All,

I have a Vf page which is used in Salesforce1. But it is not displaying properly in salesforce1. I tried adding css media query, but still it is not coming. Please PRovide me a soluton. Below is my VF code: 
<apex:page sidebar="false" controller="OrderApprovalVF" standardStylesheets="true">
     
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     
     <script type="text/javascript">
        function selectAllCheckboxes(obj,receivedInputID){
            var inputCheckBox = document.getElementsByTagName("input");
            for(var i=0; i<inputCheckBox.length; i++){
                if(inputCheckBox[i].id.indexOf(receivedInputID)!=-1){
                    inputCheckBox[i].checked = obj.checked;
                }
            }
        }
        </script>
        
        <style>
        
        .SpendingStyle {border-right: 1px solid #F0C9A3 !important;
        
        border-left: 1px solid #F0C9A3 !important; }
         
        </style>
        
        <style>
        @media only screen and (min-width:480px) and (max-width: 640px)  
        {
            body{width:100%;}
        }
        
        </style>
        
        <style>
        @font-face{
            font-family: Proximo_Nova_Soft;
            src: url("{!URLFOR($Resource.PennaFont)}");
        }
 
        .regular{
            font-family: Proximo_Nova_Soft;
            font-size: 13px;
        }
        
        .Medium{
             font-family: Proximo_Nova_Soft;
             font-size: 12px;
        }
         .semibold{
             font-family: Proximo_Nova_Soft;
             font-size: 12px;
         }
         .bold{
             font-family: Proximo_Nova_Soft;
             font-size: 12px;
         }
         
         
    </style>
       
    
      
        
<!--98AFC7-->
<body>
     <apex:form >
         <apex:pageBlock id="pgblock" >
                    
            <apex:pageBlockButtons styleClass="medium">
                <apex:commandButton action="{!ApproveSelected}" value="Approve" reRender="block2" onComplete="window.location.reload();"/>
                <apex:commandButton action="{!RejectSelected}" value="Reject" reRender="block2" onComplete="window.location.reload();"/>
            </apex:pageBlockButtons>
            <apex:pageBlockSection columns="2" >
            
                <apex:pageBlockTable value="{!wraporderList}" var="Wcord" styleClass="regular">
            
          
            
            <apex:column style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color: #F4F4BF;")}" styleClass="regular SpendingStyle" >
                 <apex:facet name="header">
                       <apex:inputCheckbox onclick="selectAllCheckboxes(this,'InputId')"/>
                 </apex:facet>
                 <apex:inputCheckbox value="{!Wcord.isSelected}" id="InputId"/>
            </apex:column>
           
            <apex:column style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color: #F4F4BF;")}" styleClass="regular SpendingStyle">
                <apex:facet name="header">Order No.</apex:facet>
                <apex:outputLink value="/{!Wcord.ord.id}" id="orderLink">{!Wcord.ord.OrderNumber}</apex:outputLink>
   
            </apex:column>
            <apex:column value="{!Wcord.ord.EffectiveDate}" style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color: #F4F4BF;")}" styleClass="regular SpendingStyle">
                <apex:facet name="header">Order Date</apex:facet>
            </apex:column>
            
            <apex:column styleClass="regular SpendingStyle" value="{!Wcord.RtsC}" style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color: #F4F4BF;")}">
                <apex:facet name="header">T/NT</apex:facet>
            </apex:column>
            
            <apex:column styleClass="regular SpendingStyle" value="{!Wcord.ord.Account.Name}" style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color: #F4F4BF;")}">
                <apex:facet name="header">Customer Name – Code</apex:facet>
            </apex:column> 
             <apex:column styleClass="regular SpendingStyle" value="{!Wcord.ord.Soldto_Contact__c}" style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color:#F4F4BF;")}">
               <apex:facet name="header">Contact No.</apex:facet>
           </apex:column> 
            <apex:column styleClass="regular SpendingStyle" value="{!Wcord.ord.Ship_To_Address__c}" style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color: #F4F4BF;")}">
                <apex:facet name="header">Ship To - Code</apex:facet>
            </apex:column>
            <apex:column styleClass="regular SpendingStyle" value="{!Wcord.ord.Destination_Text__c}" style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color: #F4F4BF;")}">
                <apex:facet name="header">Destination</apex:facet>
            </apex:column>
            
       
           
       <apex:column styleClass="regular SpendingStyle" value="{!Wcord.ord.Ship_To_City__c}" style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color: #F4F4BF;")}">
           <apex:facet name="header">District</apex:facet>
       </apex:column>
       <apex:column styleClass="regular SpendingStyle" value="{!Wcord.ord.State__c}" style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color: #F4F4BF;")}">
           <apex:facet name="header">State</apex:facet>
       </apex:column>
       <apex:column styleClass="regular SpendingStyle" value="{!Wcord.ord.Grade__c}" style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color:#F4F4BF;")}">
           <apex:facet name="header">Grade</apex:facet>
       </apex:column>
       <apex:column styleClass="font-face SpendingStyle" value="{!Wcord.ord.Price_Per_MT__c}" style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color:#F4F4BF;")}">
           <apex:facet name="header">Price Per Ton(INR)</apex:facet>
       </apex:column> 
       <apex:column styleClass="regular SpendingStyle" value="{!Wcord.ord.Incoterms_Text__c}" style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color:#F4F4BF;")}">
                <apex:facet name="header">Incoterm</apex:facet>
       </apex:column>

       <apex:column styleClass="regular SpendingStyle" value="{!Wcord.RlznC}" style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color:#F4F4BF;")}">
           <apex:facet name="header">RLZTN</apex:facet>
       </apex:column> 
       <apex:column styleClass="regular SpendingStyle" value="{!Wcord.ord.MMC_Text__c}" style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color:#F4F4BF;")}">
           <apex:facet name="header">MMC Name</apex:facet>
       </apex:column>
       <apex:column styleClass="regular SpendingStyle" value="{!Wcord.ord.MMC_Value_Text__c}" style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color:#F4F4BF;")}">
           <apex:facet name="header">MMC(INR/MT)</apex:facet>
       </apex:column>  
       
    <apex:column styleClass="regular SpendingStyle" value="{!Wcord.ord.Payment_Term_Text__c}" style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color:#F4F4BF;")}">
               <apex:facet name="header">Payment Terms</apex:facet>
           </apex:column>
          <apex:column styleClass="regular SpendingStyle" value="{!Wcord.ODV}" style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color:#F4F4BF;")}">
               <apex:facet name="header">OD(>30/45)</apex:facet>
           </apex:column>
           <apex:column styleClass="regular SpendingStyle" value="{!Wcord.OosC}" style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color:#F4F4BF;")}">
               <apex:facet name="header">Open OS(INR)</apex:facet>
           </apex:column>

           <apex:column styleClass="regular SpendingStyle" value="{!Wcord.OAmtC}" style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color:#F4F4BF;")}">
               <apex:facet name="header">Amount(INR)</apex:facet>
           </apex:column>
          
           
            <apex:column styleClass="regular SpendingStyle" value="{!Wcord.CosC }" style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color:#F4F4BF;")}">
               <apex:facet name="header">Closing OS(INR)</apex:facet>
           </apex:column>
           <apex:column styleClass="regular SpendingStyle" value="{!Wcord.ord.Total_Quantity__c}" style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color:#F4F4BF;")}">
               <apex:facet name="header">Quantity(MT)</apex:facet>
           </apex:column> 
           <apex:column styleClass="regular SpendingStyle" value="{!Wcord.PkchrgC}" style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color:#F4F4BF;")}">
               <apex:facet name="header">PKG.CHRGS(INR)</apex:facet>
           </apex:column>
           <apex:column styleClass="regular SpendingStyle" value="{!Wcord.PFrgtC}" style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color:#F4F4BF;")}">
               <apex:facet name="header">PR.FRT(INR)</apex:facet>
           </apex:column> 
           <apex:column styleClass="regular SpendingStyle" value="{!Wcord.SFrgtC}" style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color:#F4F4BF;")}">
               <apex:facet name="header">SC.FRT(INR)</apex:facet>
           </apex:column>  
           
           <apex:column styleClass="regular SpendingStyle" value="{!Wcord.ord.Material_Source__c}" style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color:#F4F4BF;")}">
               <apex:facet name="header">Source(P/D)</apex:facet>
           </apex:column>   
          
           <apex:column styleClass="regular SpendingStyle" value="{!Wcord.Submittedby}" style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color:#F4F4BF;")}">
               <apex:facet name="header">Submitted By</apex:facet>
           </apex:column> 
           <apex:column styleClass="regular SpendingStyle" value="{!Wcord.Approvedby}" style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color:#F4F4BF;")}">
               <apex:facet name="header">Approved By</apex:facet>
           </apex:column>    
           <apex:column styleClass="regular SpendingStyle" value="{!Wcord.ord.Status}" style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color:#F4F4BF;")}">
               <apex:facet name="header">Status</apex:facet>
               
           </apex:column> 
           <apex:column styleClass="regular SpendingStyle" value="{!Wcord.ord.Discount_Yes_No__c}" style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color:#F4F4BF;")}">
           <apex:facet name="header">Discount(Y/N)</apex:facet>
       </apex:column>  
            <apex:column styleClass="regular SpendingStyle" value="{!Wcord.ord.Discount_Yes_No__c}" style="{!IF(Wcord.ord.Status="Director of Marketing Review","background-color:#FFEAB7;","background-color:#F4F4BF;")}">
           <apex:facet name="header">Discount(INR/MT)</apex:facet>
       </apex:column> 
 
            </apex:pageBlockTable>
           
           </apex:pageBlockSection>
           
           <br/>
            
            <!-- next, previous and page info -->
            <apex:commandLink action="{!doPrevious}" rendered="{!hasPrevious}" value="Previous" />
            <apex:outputLabel rendered="{!NOT(hasPrevious)}" value="Previous" />
            
            <apex:outputLabel value=" (page {!page} of {!totalPages}) | showing {!startIdx} to {!endIdx} of {!totalRecords} " />
            
            <apex:commandLink action="{!doNext}" rendered="{!hasNext}" value="Next" />
            <apex:outputLabel rendered="{!NOT(hasNext)}" value="Next" />
            
         </apex:pageBlock>

       </apex:form>
       </body>

    </apex:page>

 
sfdcsushilsfdcsushil
http://www.slideshare.net/developerforce/visualforce-in-salesforce1-1-1

Above link has everything you need to write page for VF. It gives you information on which tag should be used and which should not be used. Also you need to remove StandardStylesheets. Ideally you need to write page using Javascript Remoting/Bootstrap(or any other UI library) to have good user experience on Salesforce 1.