What are the available options that we have to better optimize the horizontal space inside our modern pages

sharepoint.stackexchange https://sharepoint.stackexchange.com/questions/254465

Domanda

We have a classic online team site where we added a new modern page to it, and we set the modern page as the home page of the site. something as follow-

enter image description here

But currently we have, 2 wasted horizontal spaces (I highlighted them in red arrows inside my above picture) , as follow:-

  1. the area where the logo and the site title is being rendered.

  2. the home page banner image (containing the desert image).

so are there any approaches (built-in or using coding) , that can allow us to minimize the height of these 2 components or at-least one of them?

È stato utile?

Soluzione

We can download and deploy the react script editor web part to your site, and add react script editor web part to the modern page, then add the CSS style below into this web part to adjust the spaces.

<style>
div[class^='mainRow-']{
    height:50px !important;
}
div[class^='pageTitle_'] div[class*='backgroundImage_']{
    height:80px !important;
}
</style>

Source code of the react script editor web part: react-script-editor

Article reference: Add The Script Editor Webpart back to SharePoint Modern Experience

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a sharepoint.stackexchange
scroll top