I need to add Visualforce Page to the Lightning Community Builder page, however, it forces to set a fixed height in pixels for it, so it cannot be responsive and fit the whole screen if the user resizes the window. Is this possible to achieve?

1 Answer 1


Though not reliable, you can try CSS overrides with screen size breakpoints. I have used the VF Page code in my Dev org's community https://swekotestorg-developer-edition.ap5.force.com/BuildOwn2/s/ and could see that the VF Page is being responsive to the browser window sizing.

    <apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0"> 
  <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
      <meta charset="utf-8" />
      <meta http-equiv="x-ua-compatible" content="ie=edge" />
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <!-- Import the Design System style sheet -->
       <apex:slds />
      <div class="slds-scope">
          <!-- RESPONSIVE GRID EXAMPLE -->
          <div class="myapp">
            <div class="slds-grid slds-wrap">
              <div class="slds-col slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--1-of-4">
                <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around--x-small">Box 1</div>
              <div class="slds-col slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--3-of-4">
                <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around--x-small">Box 2</div>
          <!-- / RESPONSIVE GRID EXAMPLE -->

Related: https://www.lightningdesignsystem.com/utilities/sizing/

You must log in to answer this question.

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