2

I have to make this vfp responsive for 320x480 resolution , cause there is lost content like the following image shows: enter image description here

As you can see from bigger resolutions, the content that is lost is most of the right column and the link from below enter image description here

This is my code

<apex:page standardController="CampaignMember"  extensions="AdobeSummaryPageController">

    <!-- Display Error Message on Page -->
    <apex:pageMessages ></apex:pageMessages>
    
    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockSection columns="2">
            
                <!-- First Column of Page Section -->
                <apex:pageBlockSectionItem >
                    <apex:panelGrid columns="2" Cellpadding="2">
                        <apex:outputLabel value="Page Name:" style="float:right;" for="PageName"/>
                        <apex:outputLink id="PageName" Target="_blank" value="/lightning/r/Report/{!PageNameId}/view?fv0={!eachCampMem.CampaignId}&fv1={!leadContactId}">{!PageNameCount}</apex:outputLink> 
                        
                        <apex:outputLabel value="Download Name:" style="float:right;" for="DownloadName"/>
                        <apex:outputLink id="DownloadName" Target="_blank" value="/lightning/r/Report/{!DownloadNameId}/view?fv0={!eachCampMem.CampaignId}&fv1={!leadContactId}">{!DownloadNameCount}</apex:outputLink>
                   
                        <apex:outputLabel value="Video Name:" style="float:right;" for="VideoName"/>
                        <apex:outputLink id="VideoName" Target="_blank" value="/lightning/r/Report/{!VideoNameId}/view?fv0={!eachCampMem.CampaignId}&fv1={!leadContactId}">{!VideoNameCount}</apex:outputLink>                  
                        
                        <apex:outputLabel value="YouTube Video Name:" style="float:right;" for="YouTubeName"/>
                        <apex:outputLink id="YouTubeName" Target="_blank" value="/lightning/r/Report/{!YouTubeNameId}/view?fv0={!eachCampMem.CampaignId}&fv1={!leadContactId}">{!YouTubeNameCount}</apex:outputLink>                 
                   
                        <apex:outputLabel value="Internal Search Value:" style="float:right;" for="InternalSearchValue"/>
                        <apex:outputLink id="InternalSearchValue" Target="_blank" value="/lightning/r/Report/{!InternalSearchId}/view?fv0={!eachCampMem.CampaignId}&fv1={!leadContactId}">{!InternalSearchValueCount}</apex:outputLink>
             
                        <apex:outputLabel value="Page Sections Consumed:" style="float:right;" for="PageSectionsConsumed"/>
                        <apex:outputLink id="PageSectionsConsumed" Target="_blank" value="/lightning/r/Report/{!PageSectionsConsumedId}/view?fv0={!eachCampMem.CampaignId}&fv1={!leadContactId}">{!PageSectionsConsumedCount}</apex:outputLink>
                  
                        <apex:outputLabel value="Social Shares:" style="float:right;" for="SocialShares"/>
                        <apex:outputLink id="SocialShares" Target="_blank" value="/lightning/r/Report/{!SocialSharesId}/view?fv0={!eachCampMem.CampaignId}&fv1={!leadContactId}">{!SocialSharesCount}</apex:outputLink>
                     </apex:panelGrid>
                </apex:pageBlockSectionItem>  
                
                <!-- Second Column of Page Section -->
                <apex:pageBlockSectionItem >
                    <apex:panelGrid columns="2" Cellpadding="2">       
                        <apex:outputLabel value="Time Spent on Site (Minute):" style="float:right;" for="TimeSpentonSite"/>
                        <apex:outputText id="TimeSpentonSite" value="{!TimeSpentSiteCount}"/> 
                       
                        <apex:outputLabel value="Form Start:" style="float:right;" for="FormStart"/>
                        <apex:outputLink id="FormStart" Target="_blank" value="/lightning/r/Report/{!FormStartId}/view?fv0={!eachCampMem.CampaignId}&fv1={!leadContactId}">{!FormStartCount}</apex:outputLink> 

                        <apex:outputLabel value="Form Completed:" style="float:right;" for="FormCompleted"/>
                        <apex:outputLink id="FormCompleted" Target="_blank" value="/lightning/r/Report/{!FormCompletedId}/view?fv0={!eachCampMem.CampaignId}&fv1={!leadContactId}">{!FormCompletedCount}</apex:outputLink> 
                        
                        <apex:outputLabel value="Platform:" style="float:right;" for="MobileDesktopView"/>
                        <apex:outputLink id="MobileDesktopView" Target="_blank" value="/lightning/r/Report/{!MobileDesktopViewId}/view?fv0={!eachCampMem.CampaignId}&fv1={!leadContactId}">{!MobileDesktopViewCount}</apex:outputLink>
 
                        <apex:outputLabel value="Device Type:" style="float:right;" for="DeviceType"/>
                        <apex:outputLink id="DeviceType" Target="_blank" value="/lightning/r/Report/{!DeviceTypeId}/view?fv0={!eachCampMem.CampaignId}&fv1={!leadContactId}">{!DeviceTypeCount}</apex:outputLink>
                        
                        <apex:outputLabel value="Content Click:" style="float:right;" for="DeviceType"/>
                        <apex:outputLink id="ContentClick" Target="_blank" value="/lightning/r/Report/{!ContentClickId}/view?fv0={!eachCampMem.CampaignId}&fv1={!leadContactId}">{!ContentClickCount}</apex:outputLink>
                        
                        <!-- added by: charmaine.c.yaun US#1033857 - -->
                        <apex:outputLabel value="Page Pathing:" style="float:right;" for="PagePathing"/>
                        <apex:outputLink id="PagePathing" Target="_blank" value="/lightning/r/Report/{!PageLinkPathId}/view?fv0={!eachCampMem.CampaignId}&fv1={!leadContactId}">{!PageLinkPathCount}</apex:outputLink>
                        <!-- added by: charmaine.c.yaun US#1033857 - end -->
                    </apex:panelGrid>
                </apex:pageBlockSectionItem>
                
                <!-- Display Link of Report that direct to another VF page -->
                <apex:pageBlockSectionItem >
                    <apex:panelGrid columns="2" Cellpadding="2">       
                       <a href="{!$Site.domain}/apex/AdobeIndividualCampaignMember?ID={!cID}" target="_parent">{!$Label.Adobe_SummaryReport_LinkName}</a>
                    </apex:panelGrid>
                </apex:pageBlockSectionItem>  
                 
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Any idea on how to solve this? I tried with sidebar=false on apex:page tag,but had no luck with that one

Improve this question
1

1 Answer 1

Reset to default
2

Do not use apex:panelGrid/apex:pageBlock/etc if you expect a responsive design. These Visualforce components are not responsive; in fact, there's even a checkbox for Visualforce pages that indicate a page is supported on Mobile, and only those can be used in a mobile app. Developers should only enable the checkbox for pages that use a reactive design, meaning SLDS or another responsive framework.

Instead, use the Salesforce Lightning Design System by importing via <apex:slds/>, and then use SLDS classes to form a responsive "table." (Note that it will actually be a collection of nested div elements with various CSS classes that enable reactive functionality).

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .