Troubleshooting: Resolving Digital Experiences Site’s Default Margins

Topic
When adding a Skuid Page to a Salesforce Digital Experience’s site builder, the margins and padding displayed are not what the user sees in the page preview when previewing the Skuid page from the app composer.

Resolution
The issue comes from the pre-existing CSS Lightning containers implemented in Salesforce’s Digital Experience. Their builder’s container’s implements margins and padding that can affect any Visualforce page or Lightning component. This CSS can be overridden however it involves writing custom CSS code.

Problem Details
The affected user on their Skuid page had multiple components in a responsive grid set to 100% width. However when importing the Skuid page into the Digital Experience’s (former Community) site builder and previewing the page, the components in the responsive grid were cut off at the page’s edges and the full content could not be seen.

Resolution Process:

• Use chrome inspector to inspect the elements on the page.
• Discovered there were a number of CSS classes on the page that did not appear in the Skuid page preview. Those classes included:

.siteforceServiceBody
.siteforceContentArea
.siteforceStarterBody

• CSS was written to override these classes extending their width to 100%, however this did not completely resolve the issue.
• After trial and error with Chrome’s inspector the following CSS resolved the issue:

.siteforceServiceBody .cCenterPanel {
  width: 100% !important;
  max-width: 100% !important;
}

.siteforceContentArea .comm-layout-column:not(:empty) {
  padding: 0 !important;
}

.slds-col_padded, .slds-col--padded {
  padding: 0 !important;
}

.slds-m-top--x-large {
  margin-top: 0 !important;
}

.slds.tokenPadding.testautonumdataInterviewsList .slds-button.slds-button--neutral {
  visibility: hidden;
}

.siteforceStarterBody .cCenterPanel {
  width: 100% !important;
  max-width: 100% !important;
}

.slds-p-horizontal_medium, .slds-p-horizontal--medium {
  padding: 0 !important;
}

Additional Information
Keep in mind when using Skuid in a Salesforce Lightning environment like the Digital Experience’s site builder that Lightning may have existing settings that affect how the Skuid page displays. In this case while CSS was used to resolve the issue, Salesforce’s best practice is to use custom CSS sparingly.

Get help with an issue

• Ask in the Skuid question forum.
• If you have a support entitlement, ask your question in Nintex Customer Central.