Others

How to Use Full Page Width in SharePoint Online Communication Sites

Muhammad Talha Oct 21, 2026 869 views

Question details

The user wants to expand the horizontal layout of a SharePoint communication site to utilize the unused white space on both sides of a full-width section.

How to Use Full Page Width in SharePoint Online Communication Sites

Product: SharePoint Online
Device & OS: not provided
Scenario: Designing a communication site home page and trying to maximize horizontal screen space.
Observed behavior: Even when using three columns or full-width sections, there is considerable unused white space on the sides of the page.

Before you start

Ensure you have the necessary site owner or developer permissions in SharePoint Online to modify page layouts or deploy custom SPFx solutions.

Solution 1Recommended

Use SharePoint Framework (SPFx) for Custom Extensibility

The official and most reliable way to create a true full-width horizontal layout across communication sites.

Since communication sites do not natively support full-viewport horizontal stretching for standard web parts, you must build a custom solution using the SharePoint Framework (SPFx).

Set up SPFx Environment

Set up your SharePoint Framework (SPFx) development environment by installing Node.js and the Yeoman SharePoint generator.

Create an Application Customizer

Create a new SPFx web part or Application Customizer project that overrides the default container width properties.

Apply Custom CSS

Apply custom CSS within your SPFx solution to target the CanvasZone and expand the max-width to 100%.

Deploy the Solution

Package your project, deploy it, and install the SPFx solution through your SharePoint App Catalog.

Use SharePoint Framework (SPFx) for Custom Extensibility

Developer Knowledge Required: SPFx development requires knowledge of TypeScript, React, and deployment through the SharePoint App Catalog. For specific code guidance, consult Microsoft Q&A for SharePoint Online.

Solution 2

Switch to a Team Site with a Vertical Section

A native workaround that fills the viewport horizontally by adding a vertical section, though it changes the layout structure.

Solution 3

Inject Custom CSS via Script Editor

Use a third-party script editor web part to inject custom CSS directly onto the communication site page.

Free Microsoft Office alternative

Collaborate on Documents Easily with WPS Office

If your organization is exploring alternatives to the broader Microsoft ecosystem for document creation, WPS Office provides a free, lightweight, and highly compatible suite. It's the perfect desktop alternative for teams to create, edit, and share documents before uploading them to your intranet.

1. Download and Install: Visit the official WPS website to download the free suite for your preferred operating system.
2. Open Microsoft Formats: Easily open your existing .docx, .xlsx, and .pptx files directly in WPS Office without losing any formatting.
3. Collaborate Efficiently: Use built-in tools to track changes, add comments, and co-author documents with your team.

Fully compatible with Microsoft Word, Excel, and PowerPoint formats.Free and lightweight software that runs smoothly on Windows, Mac, and Linux.Built-in PDF editing, merging, and conversion tools.Familiar user interface ensuring zero learning curve for your team.

microsoft office alternative - wps office

Frequently Asked Questions

Can I use standard settings to make a SharePoint communication site full width?

No, SharePoint communication sites do not provide a built-in standard setting to expand standard horizontal sections to full screen width. Native full-width sections are limited to specific web parts like the Hero or Image web part.

Does adding columns help fill the white space on SharePoint pages?

Adding up to three columns distributes content within the standard container boundaries, but it does not eliminate the unused white space on the far left and right sides of the page.

What is SPFx in SharePoint Online?

The SharePoint Framework (SPFx) is Microsoft's recommended page and web part customization model. It allows developers to use modern client-side development tools to build custom layouts, web parts, and extensions.

Do Team sites have different layout options than Communication sites?

Yes, Team sites offer slightly different layout options. Notably, they feature a vertical section layout that pushes content across the viewport, an option not natively available in Communication sites.

Office Quick Solutions