SharePoint Online Modern Page Banner Too Large

Question

The banner at the top of my SharePoint Online modern pages is too large. Is there a way to resize this area. I know there is a Plain banner but we want the color? We just want it half the height.

I have very little experience with SharePoint so if your answer involves SPFX, React something, etc. it's going to go over my head. I did find this:

https://github.com/wobba/spfx4fun/tree/master/react-pageheaderconfigurator

which appears to be what I'm looking for but I have no idea how to add this to my site.

Answer 1

Hi @Jim - KPFF ,

According to my research and testing, unfortunately, there is currently no out-of-the-box way to resize the banner at the top of SharePoint Online Modern Pages. I tried using the method in the link you provided, but unfortunately there may be some errors in the code, so I unable successfully deploy it to the SharePoint site.

As a workaround, you can try to write CSS Style in Modern Script Editor Web Part to override it, please follow these steps:

1. Add Script Editor Web Part to SharePoint, please follow this document: Add The Script Editor Webpart back to SharePoint Modern Experience
2. Install the Script Editor Web Part in the page, then write the CSS code inside Modern Script Editor Web Part: <style type="text/css">
   .webPartContainer {
   height: 100px;
   }
   </style>
   

3.Then click Save and Republish.

My test result:

Similar issue for reference: How to reduce the height of the page banner in modern pages in SharePoint Online RRS feed

Hope it can help you. Thanks for your understanding.

Note: Microsoft is providing this information as a convenience to you. The sites are not controlled by Microsoft. Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. Please make sure that you completely understand the risk before retrieving any suggestions from the above link.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

---