SharePoint Online full-width page

Question

I am still exploring SharePoint Online creating webparts and deploying through visual studio code using Typescript.

I created a HelloWorld webpart and uploaded it on page. I was able to create package file, upload it on App-Catalog, install it and add to page.

Once it is on page its not taking whole page and in Page Layout section I am not able to see full width option.

As you can see from below screenshot, my webpart is in center of the page whereas What I want is It should be full-width, it should take over whole page.

And in Section layout, full width option is missing.

Can anyone suggest me or give me tip of how to create whole page webpart in SharePoint Online using SPFX.

Answer 1

Looks like you are using a Modern Team site, the full width column is currently available only for Communication Site.

To enable your webpart to full-width, you need to set the property "supportsFullBleed": true, in your webpart's manifest file. Also, you wont be able to test this webpart locally as full width section is not available on the workbench page.

References - Use web parts with the full-width column

How to add SPFx webpart to full-width column

Uservoice link - Full-Width Column Webpart available to Team Site Template

Answer 2

just install modern script editor web part

then insert CSS:

<style type="text/css"> 

#spLeftNav {
    display: none;
}
#spPageCanvasContent {
  margin: auto;
  width: 75%;
} 
    
</style>