Consulting firm dataBridge is providing free SharePoint planning tools available for download “to assess governance maturity, Copilot readiness, permissions, migrations, intranet redesign, AI readiness, and long-term SharePoint adoption.” Click here and then scroll down to find nine different scorecards, matrices, checklists, and worksheets for your next SharePoint project.
Category: SharePoint Subscription Edition
Modern Site pages often have a large amount of unused white space on the sides of the active content area. The bulk of the nonsense found on Google is not helpful.
The short answer is:
- I used F12 (aka “Developer Tools”) to figure out the exact name of the content area that is undersized. In our case it’s “CanvasZone”. Later on it was “SPCanvas-canvas”. So I’ve updated the code for both.
- I added a Content Editor Web Part (You may have to add the free “Modern Content Editor Web Part” from Github.)
- I added the below CSS code to the CEWP above to set the width to 100% and the margins to 0.
Here is the code for you to use:
<style text="type/css">
.CanvasZone>:first-child,.CanvasZone,.CanvasComponent,.SPCanvas-canvas,.CanvasZoneContainer {
max-width: 100% !important;
width: 100% !important;
padding: 0px !important;
margin: 0px !important;
}
.CanvasSection-xl4>:first-child {
margin: 0px !important;
padding: 0px !important;
}
</style>
__________________________________________________________________
**Update Apr 24, 2025: This super helpful video from SPJeff covers this very topic. Great minds think alike. I wish I had found his video before going to all of this work! I added his .CanvasSection-xl4 code to my code above.
**Update Nov 8, 2025:I work with a gov’t client who’s running SP2016. I added these selectors to line 2: .CanvasComponent,.SPCanvas-canvas,.CanvasZoneContainer