creating a full width-web part

Question

I have a PowerBI that I imbedded into a page. right now it only takes up 1/ the page and i want it to take up the whole width.

searching on MS, I have to change the settings in the web part but I cannot find the right area to click. any advice? maybe my organization blocked it.

ty

Use web parts with the full-width column | Microsoft Learn

Answer 1

Hi @Ho, Anson,

To make the web part full-width, you'll need to apply CSS styles to the web part. Since Script Editor is unavailable for SharePoint modern page. We will need to deploy a spfx web part to apply CSS styles to the web part. You will need take following steps, please make a reference

1. Set up your development environment install following package

npm install gulp-cli yo @microsoft/generator-sharepoint --global

1. Create a new SPFx project
2. Customize your web part

Inside the newly created project directory, navigate to the src/webparts folder. You will find the scaffolded web part under a folder with the name you provided during project creation.

Modify the web part code to suit your needs. You can update the React component in the YourWebPartName.tsx file to render your desired content.

1. Make the web part full-width

To make the web part full-width, you'll need to apply CSS styles to it. Open the YourWebPartName.module.scss file and add a CSS rule to make it full width. For example:

.fullWidthWebPart {
    width: 100%;
}

1. Build and package your solution

gulp build
gulp bundle --ship

1. Deploy and test your solution

Upload the .sppkg file to your SharePoint app catalog. Then add the web part to a page and ensure that it displays as full-width.

Here is the document for more details about spfx

https://learn.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant

---

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.