Mar 25
11
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 for resolving this tends to fall into one of these four categories:
- It’s not possible to change it. Deal with it. (This is the standard answer from Microsoft moderators.)
- I’m having this problem too! (I don’t care. Provide a solution or be quiet.)
- Add a vertical column on the right side from the Section menu. (We know about this. It’s not relevant.)
- Unrelated gibberish. (My personal favorite.)
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%.
So try this code:
<style text="type/css">
.CanvasZone {
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !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:
<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. Here is how to do that:
<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: Here is a super helpful video from SPJeff that covers this very topic. Great minds think alike. I wish I had found his video before going to all of this work!
