I'm currently building a SharePoint SPFx react webpart.

While developing the webpart I'm viewing/accessing the webpart using workbench using the following link: https://mysite.sharepoint.com/sites/Website/_layouts/15/workbench.aspx

Is there any way to make this page full width? Here is a screenshot: https://ibb.co/jkZYprP

As you can see the section to add the webpart has a max-width of 924px on the workbenchPageContent div. This is an issue because my actualy SharePoint site is using a theme with full with layout. So when I load the webpart on my actual SharePoint site, my frontend looks different. This makes it hard to do front-end UI work since the workbench and my live site have different widths.


You can add below css in the starting of the webpart scss file(yourwebpartname.module.scss)

:global {
  .CanvasComponent.LCS .CanvasZone {
    max-width: 100% !important;
  • WOW! I wish I asked this question MONTHS AGO! This helped so much! Had no idea I can target classes by using :global
    – hisusu32
    Jun 17 at 17:32
  • @hisusu32 If you feel the answer solved the problem, please mark it as 'accepted' by clicking the green check mark. Jun 17 at 17:58

You can add "supportsFullBleed": true to enable full width column for your webpart. You can find more info here: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/use-web-parts-full-width-column

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.