Mar 25
11
Modern Site pages on Team sites often have a large amount of unused white space on the right side of the active content area. Apparently this is not the case with modern Communications sites. (I don’t know for sure.) Regardless, it’s a problem. The bulk of the nonsense found on Google 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. 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.
- 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%.
__________________________________________________________________
But we didn’t do it this way. Today, my team ran into this and 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. Here is that code:
1 2 3 4 5 | <script>JQuery(document).ready(() => {JQuery(".CanvasZone").css("max-width",'100%')});</script> |
Replace “CanvasZone” with your content area name.
If your page is not already calling JQuery, you can call JQuery from within the code snippet. Here is that code:
1 2 3 4 5 6 | <script>JQuery(document).ready(() => { JQuery(".CanvasZone").css("max-width",'100%')});</script> |
If I ever have to write pure CSS code to resolve this issue, I’ll post it here. Either way, I hope this helps and at least steers you in the right direction.
