Troubleshooting: Resolving Digital Experiences Site’s Default Margins

Discussion Knowledge Base
1

Problem: 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;
}

Outcome: After implementation of the custom CSS to the user’s Digital Experience site’s theme (Override the Template Elements with Custom CSS) the site’s preview matched what the user was seeing in their Skuid page preview resolving the issue.

Takeaways: It is good to 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 user community in the questions category.

If you have paid support, ask your question on our support portal:

2 Likes