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:
- Use F12 (aka “Developer Tools”) to figure out the exact name of the content area that is undersized. In our case it’s “CanvasZone”.
- Add a Content Editor Web Part (You may have to add the free “Modern Content Editor Web Part” from Github.)
- Add CSS code to the CEWP above to set the width to 100%.
Here is the code for you to use:
<style text="type/css">
.CanvasZone>:first-child,.CanvasZone {
max-width: 100% !important;
width: 100% !important;
padding: 0px !important;
margin: 0px !important;
}
.CanvasSection-xl4>:first-child {
margin: 0px !important;
padding: 0px !important;
}
</style>
__________________________________________________________________
Full disclosure: we didn’t do it the above way. While looking at the page in F12, one developer saw that our page was already calling JQuery. So he asked an AI tool to write the appropriate JQuery code. It did and it worked. So here is the code we used, with only the .CanvasZone max-width value:
<script>
JQuery(document).ready(() => {
JQuery(".CanvasZone").css("max-width",'100%')
});
</script>
If your page is not already calling JQuery, you can call JQuery from within the code snippet. Google provides it so just call theirs. It’s line 1 below simply appended to the code above.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
JQuery(document).ready(() => {
JQuery(".CanvasZone").css("max-width",'100%')
});
</script>
**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.
