function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Maeze AhlersMaeze Ahlers 

Remove margin/padding around visualforce page in lightning app

I have created multiple visualforce pages to go into lightning app builder (I have to do this instead of components because we have many users and are not ready to deploy domain name, so I cannot use lightning components yet). I'd like to expand the apex page to all corners of the alotted space that is given from the app and remove the name of the visualforce page. 

When I inspect the page, I can move the visualforce page where I'd like it to move within the area using .slds-card__body.slds-card__body--inner and modifying the top-margin to -50px, however, it modifies every visualforce page in the app. When I add this class to the code of my visualforce page and modify the margins in the style it doesn't render. It is nested under an <article class> and I'm not sure how to adjust my class in the visualforce page to account for the article, which I believe is why it's not working. Below is a picture of how this looks: User-added image
This is how it looks now:


 User-added image
This is how I'd like it to look: 
User-added image
The other option I considered was creating a visualforce page with multiple pageblock sections however (although it's not pictured in this example), I need each section to display a separate opportunity list, and I could not find a way to do that using this method, but any suggestions are welcomed!
Thank you!!
<apex:page standardController="Opportunity" recordsetvar="opportunities" id="standopp" showHeader="false">

<div class="slds-card__body.slds-card__body--outer">
<div class=".slds-card__header.slds-grid" style="margin-left:-20px; margin-top:-50px;">
 <apex:form title="form" id="form"  style="zoom:75%; height:550px;width:100% showscroll:False">
  <apex:pageblock id="firstpb" title="firstpb">
   <apex:panelgrid columns="4" id="panelg" title="panelg">
    <apex:outputlabel value="view:"/>
     <apex:selectlist value="{!filterId}" id="select1" title="select1" size="1">
     <apex:selectOptions value="{!listviewoptions}"/>
     <apex:actionsupport event="onchange" rerender="oppsection"/>
    </apex:selectlist>
   </apex:panelgrid>
  <apex:pageblockbuttons >
   <apex:commandButton value="Save" action="{!save}"/>
   <apex:commandButton value="Quick Save" action="{!save}"/>
  </apex:pageblockbuttons> 
  
 
   <apex:pageblocksection id="oppsection" showheader="true">
   <apex:outputPanel style="overflow:auto;width:650px;height:250px">
    <apex:repeat value="{!opportunities}" var="opp" id="rep">
     <apex:pageblocksection id="oppsection2" showheader="true" title="{!opp.name} - {!opp.Billing_City_State__c}">
      <apex:pageblocktable id="table"  value="{!opp.name}" title="pbt1" columns="4" var="pbt" style="width:100px">
       <apex:column headerValue="Information" style="width:100px" >
        <apex:inputField style="width:100px" value="{!opp.stageName}"/><br/>
        <apex:inputField style="width:100px" value="{!opp.LeadSource}"/> <br/><br/>
        <apex:inputField style="width:100px" value="{!opp.Priority__c}"/>
       </apex:column>
       <apex:column headerValue="Information"  style="width:100px" >
        <apex:outputtext style="width:100px" styleclass="bold" value="Overview"></apex:outputtext><br/>     
        <apex:inputField style="width:100px" value="{!opp.Company_Overview__c}" /> <br/>
        <apex:outputtext style="width:100px" styleclass="bold" value="Last Activity"></apex:outputtext><br/> 
        <apex:inputField style="width:100px" value="{!opp.Last_Activity_Date__c}" /> <br/>  
        <apex:outputtext style="width:100px" styleclass="bold" value="Next Activity"></apex:outputtext><br/> 
        <apex:outputLink style="width:100px" value="/{!opp.Next_Activity_ID__c}">{!opp.Next_Activity_Due_Date__c}</apex:outputlink> <br/> 
        <apex:outputtext style="width:100px" styleclass="bold" value="FollowUp"></apex:outputtext><br/>
        <apex:inputField style="width:100px" value="{!opp.Follow_Up_Date__c}" />
       </apex:column>
        <apex:column headerValue="Inactive Stage" id="multi">
         <apex:inputField style="zoom:75%" value="{!opp.Inactive_Stage__c}"/ >
        
         <apex:outputtext value="Corporate?"></apex:outputtext> <apex:inputField value="{!opp.Handled_From_Coorporate__c}"/> &nbsp; <apex:outputtext value="HQ:?"></apex:outputtext> &nbsp;<apex:inputField style="width:100px" value="{!opp.Headquarters__c}"/> &nbsp;
         <apex:outputtext value="Email?"></apex:outputtext> <apex:inputField value="{!opp.Email_Blast__c}"/> <apex:outputtext value="Locations"></apex:outputtext> &nbsp; <apex:inputField style="width:100px" value="{!opp.Number_of_Locations__c}"/> 
        </apex:column>
      </apex:pageblocktable>
     </apex:pageblocksection> 
    </apex:repeat>
    </apex:outputpanel>
   </apex:pageblocksection>
   
  </apex:pageblock>
 </apex:form> 
 
<style language="css">

.opportunityTab .tertiaryPalette, .individualPalette .opportunityBlock .tertiaryPalette, .layoutEdit .individualPalette .opportunityBlock .tertiaryPalette {
    background-color: #005f93;
    border-color: #005f93;
    width:650px;
   
}    
.opportunityTab .secondaryPalette, .individualPalette .opportunityBlock .secondaryPalette {
    border-color: #005f93;
    
 }    
 
span.bold {
font-weight:bold;
}


</style>  
</div>
</div>
</apex:page>
sfdc1.3890582999007844E12sfdc1.3890582999007844E12
@Maeze Ahlers Have you gotten a solution? I am trying the same thing for similiar reasons. lightning embeds VF pages as iframes, which is why you cannot change the sytying of the parent ( lightning page) from the VF page using javascript or css. Javascript is blocked due to cross domain. I know that some javascript can be used using sforce1 command, but not sure about any sytlying commands. 

did you get anywhere with this?