Home

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

%3CLINGO-SUB%20id%3D%22lingo-sub-358830%22%20slang%3D%22en-US%22%3EAny%20way%20to%20reduce%20the%20height%20of%20a%20hero%20web%20part%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-358830%22%20slang%3D%22en-US%22%3E%3CP%3EI've%20currently%20got%20a%20modern%20communication%20site%20that's%20using%20a%20full-width%20column%20and%20a%20hero%20web%20part%20for%20displaying%20news%20tiles.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EBy%20default%2C%20the%20hero%20web%20part%20is%20extremely%20large.%20I'd%20like%20it%20to%20take%20up%20the%20full%20width%20of%20the%20page%20but%20not%20be%20so%20large%20in%20height.%20Below%20the%20hero%20web%20part%20are%20some%20other%20web%20parts%20I've%20added%2C%20but%20the%20user%20is%20forced%20to%20scroll%20down%20to%20view%20these%20due%20to%20the%20hero%20web%20part's%20size.%20I'd%20like%20a%20page%20where%20everything%20is%20visible%20without%20the%20user%20having%20to%20scroll.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI've%20added%20a%20screenshot%20to%20show%20what%20I%20mean%2C%20ignore%20the%20blur%20as%20this%20is%20just%20to%20keep%20the%20content%20private.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F84811i4E7604515AF8C4AD%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22image.jpg%22%20title%3D%22image.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIs%20it%20possible%20to%20manually%20modify%20the%20size%20in%20any%20way%3F%3C%2FP%3E%3CP%3EThanks%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-358830%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3Ehero%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESize%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3Eweb%20part%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-359843%22%20slang%3D%22en-US%22%3ERe%3A%20Any%20way%20to%20reduce%20the%20height%20of%20a%20hero%20web%20part%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-359843%22%20slang%3D%22en-US%22%3E%3CP%3ETo%20the%20best%20of%20my%20knowledge%2C%20no.%20The%20nice%20thing%20about%20modern%20is%20that%20any%20customizations%20are%20visible%20in%20the%20pane%20for%20that%20web%20part.%20There%20are%20no%20hidden%20tricks%20or%20back%20doors.%20If%20you%20don't%20see%20an%20option%20to%20%22Change%20the%20size%22%2C%20then%20it%20likely%20can't%20be%20done.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThat%20being%20said%2C%20this%20is%20responsive%20design.%20If%20you%20change%20the%20size%20of%20the%20container%20the%20web%20part%20is%20in%2C%20the%20web%20part%20will%20resize%20to%20fit.%20I%20would%20insert%20a%20section%20above%20this%20one%2C%20set%20it%20to%201%2F3%20right%20and%20move%20your%20hero%20web%20part%20in%20to%20the%202%2F3%20left%20column.%20That%20will%20shrink%20the%20size%20a%20bit.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20agree%20the%20hero%20is%20HUGE.%20I%20have%20a%2019%22%20monitor%20and%20between%20the%20browser%20tabs%20and%20page%20header%20I%20can't%20fit%20the%20entire%20hero%20vertically%20on%20my%20screen.%20I'm%20always%20cutting%20off%20a%20bit%20at%20the%20top%20or%20bottom.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1087941%22%20slang%3D%22en-US%22%3ERe%3A%20Any%20way%20to%20reduce%20the%20height%20of%20a%20hero%20web%20part%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1087941%22%20slang%3D%22en-US%22%3EI'm%20new%20to%20Sharepoint%2C%20so%20don't%20chastise%20me%20too%20bad...%3CBR%20%2F%3EThe%20Hero%20is%20the%20only%20thing%20that%20goes%20full%20width%20of%20the%20site%20as%20far%20as%20I%20can%20tell.%20When%20you%20put%20a%20Hero%20into%20a%20multi-column%20web%20part%2C%20it%20will%20not%20fill%20up%20the%20entire%20column.%20Say%20you%20wanted%20a%20Hero%20with%20four%20parts%20for%20example%2C%20which%20isn't%20automatically%20offered.%20If%20you%20create%20a%20new%20section%20with%20two-columns%2C%20and%20each%20column%20contains%20a%20two-column%20Hero%2C%20it%20no%20longer%20goes%20the%20full%20width%20of%20the%20page.%20Likewise%2C%20a%20single%20image%20(made%20up%20of%20four%20images%20with%20a%20little%20gutter%20added%20in%20between%20them)%20will%20go%20full%20width%2C%20but%20I%20see%20no%20way%20of%20adding%20four%20links%2C%20one%20over%20each%20image.%20A%20bit%20of%20a%20head-scratcher...%3C%2FLINGO-BODY%3E
Toby McDaid
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

 

2 Replies
Highlighted

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.

Highlighted
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...