Any way to reduce the height of a hero web part?

Iron Contributor

I've currently got a modern communication site that's using a full-width column and a hero web part for displaying news tiles.

 

By default, the hero web part is extremely large. I'd like it to take up the full width of the page but not be so large in height. Below the hero web part are some other web parts I've added, but the user is forced to scroll down to view these due to the hero web part's size. I'd like a page where everything is visible without the user having to scroll.

 

I've added a screenshot to show what I mean, ignore the blur as this is just to keep the content private.

 

image.jpg

 

Is it possible to manually modify the size in any way?

Thanks

 

5 Replies

To the best of my knowledge, no. The nice thing about modern is that any customizations are visible in the pane for that web part. There are no hidden tricks or back doors. If you don't see an option to "Change the size", then it likely can't be done. 

 

That being said, this is responsive design. If you change the size of the container the web part is in, the web part will resize to fit. I would insert a section above this one, set it to 1/3 right and move your hero web part in to the 2/3 left column. That will shrink the size a bit. 

 

I agree the hero is HUGE. I have a 19" monitor and between the browser tabs and page header I can't fit the entire hero vertically on my screen. I'm always cutting off a bit at the top or bottom.

I'm new to Sharepoint, so don't chastise me too bad...
The Hero is the only thing that goes full width of the site as far as I can tell. When you put a Hero into a multi-column web part, it will not fill up the entire column. Say you wanted a Hero with four parts for example, which isn't automatically offered. If you create a new section with two-columns, and each column contains a two-column Hero, it no longer goes the full width of the page. Likewise, a single image (made up of four images with a little gutter added in between them) will go full width, but I see no way of adding four links, one over each image. A bit of a head-scratcher...

@alandarr,  That was such a clever suggestion I went and tried it.  Unfortunately, when attempting to put the hero control inside a multi-column section, it shows only one hero image at a time, slider-style, and you have to hit the left/right arrows overlaid on the image to see the others.

 

I've tried this in a two-column and three-column section within a full-width page on a 1920x1200 monitor in full-screen mode.  Not sure if you've successfully done it, but if so, I'd like more details.  It sounded like a great idea.

 

@Toby McDaid  Generally speaking, if you don't see a button or control that allows you to do a thing, then you probably can't. In this case, the Hero web part is pretty unmodifiable. You get boxes or layers. That's it.  All web parts are responsive, so they will adapt to the size of the column or page, but you cannot control how that happens. 

 

The hero web part is designed to give that look where it's the ONLY thing people see when they open the page on a regular sized monitor or on their phone. Personally, I have found that people often don't know to scroll down so that can be a problem. Sometimes changing the column background color in the next section can be a hint.

 

You can use a Quick Links web part in a grid format - not as pretty as a hero, but the links are large and graphic.

@Toby McDaidthe height is not changeable but this might somehow reduce the overall size.  Try to insert a New Section with 1 column then drag your hero web part to it.