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

Question

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-

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?

Answer 1

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