How to show VF page in Classic and hide in Lightning

Question

I have a VF page which I have added on the Account detail Page . I want to display this page only in Classic and hide the page completely in Lightning record detail page .To achieve this I added a rendering tag (rendered="{!!CONTAINS($CurrentPage.URL, 'lightning.force.com')}") which check the URL and hide the page from Lighting and show only in Classic .Though the page is not displaying in lightning,but it leaves a white space behind . Could you please help me on how to get rid of this whitespace?

Code :

<apex:page standardController="Account" lightningStylesheets="false" rendered="{!!CONTAINS($CurrentPage.URL, 'lightning.force.com')}" >
    <apex:outputField value="{!Account.name}"/>
    <!-- Adding Detailed section using OutputField -->  
    <apex:pageBlock title="Account Details">
    <apex:pageBlockSection >        
    <!--apex:detail relatedList="false"/ -->
            <apex:outputField value="{!Account.name}"/>
            <apex:outputField Value="{!Account.phone}"/>
            <apex:OutputField value="{!Account.Country__c}" />
            <apex:outputField Value="{!Account.State__c}" />
            <apex:outputField Value="{!Account.AnnualRevenue}" />
            {!Account.AnnualRevenue}    
    </apex:pageBlockSection>    
    </apex:pageBlock>
<!-- Adding Releated List using PageBlockTable -->

    <apex:pageBlock title="Associated Contacts" >

         <apex:pageBlockTable value="{!Account.contacts}" var="con">

         <apex:column value="{!con.Name}"/>
         <apex:Column value="{!con.Title}" />

    </apex:pageBlockTable>

    </apex:pageBlock>
&lt;apex:pageBlock title=&quot;Associated Opportunities&quot;&gt;
&lt;apex:pageBlockTable value=&quot;{!Account.opportunities}&quot; var=&quot;Oppty&quot;&gt;
    &lt;apex:column value=&quot;{!Oppty.name}&quot;/&gt;
    &lt;apex:column value=&quot;{!Oppty.Type}&quot;/&gt;  
    &lt;apex:column value=&quot;{!Oppty.stagename}&quot;/&gt;        
&lt;/apex:pageBlockTable&gt;

&lt;/apex:pageBlock&gt;   

<!-- Adding Releated List using relatedList component -->

<apex:relatedList list="Contacts"/> 
<apex:relatedList list="Opportunities" pageSize="5"/>
    <!-- /apex:outputPanel -->

</apex:page>

This is how it looks on the lightning Account record page after hiding the VF page through rendering tag: Please help me on this

Thanks

Answer 1

Better option would be to enable dynamic forms from Lightning App Builder for lightning account record page. So you will be independent of the page layout.

It gives you the ability to control what you want to show in classic and lightning. See here -Enhance More Object Record Pages With Dynamic Forms And also this: Break Up Your Record Details with Dynamic Forms

Update

Once you enable the dynamic forms, You need to add the fields that you want on the layout. You can also set the field level visibility for each individual fields.

You can watch this video to understand the concept :- https://www.youtube.com/watch?v=Iatxjbuf3Qc

If you cannot go for Dynamic forms, there are two more approach i have:-

1. Check this approach :- Dynamically resize VisualForce section in page layout
2. You can just remove the detail component on lightning record page and create update a record quick action on account object. Then follow this approach to mimic the detail component in lightning:- POINT AND CLICK ALTERNATIVE TO LIGHTNING DATA SERVICE

Answer 2

Have you considered using page layouts?

1. One layout for users in classic, that'll have the vf page.
2. Second layout for lightning experience users.

Off course you'll need to have record types for each page layout and assuming lightning users will be identified by their unique profile and like wise classic users will be identified by their profile.