I have to make this vfp responsive for 320x480 resolution , cause there is lost content like the following image shows:
As you can see from bigger resolutions, the content that is lost is most of the right column and the link from below
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