SOLVED

Modern Page List WebPart, max-width

Brass Contributor

I have some modern pages with the List WebPart.

Everything looks okay as long as I don't use a wide screen, because then the list will be cut off on the right side and there is unused space on the right.

 

in the css i found this setting:

.CanvasZone {
      max-width: 1284px;
      ...
      ..
}
 
Can I change/remove the value, so the whole screen width is used for the List?
 
 
Thanks 
Philipp
 
 
1 Reply
best response confirmed by PhilAlg (Brass Contributor)
Solution

It's not best practice to try and override the out of the box styles provided by SharePoint. While .canvasZone is unlikely to change, it's entirely possible it could. We've heard that Microsoft is working on providing larger screen size support (1920px) to make better use of the screen real estate. With that being said, I can understand your issue with the lists because they aren't really responsive on the pages.

Microsoft has spent a lot of time and money on accessibility and making sure the native web parts work well on most screen sizes. The fixed width is a common web standard now because of the different sizes and resolutions of monitors that exist today. Take a quick watch of this video by David Warner on why the white space exists http://warner.digital/modern-sharepoint-pages-layouts-and-whitespace/

 

1 best response

Accepted Solutions
best response confirmed by PhilAlg (Brass Contributor)
Solution

It's not best practice to try and override the out of the box styles provided by SharePoint. While .canvasZone is unlikely to change, it's entirely possible it could. We've heard that Microsoft is working on providing larger screen size support (1920px) to make better use of the screen real estate. With that being said, I can understand your issue with the lists because they aren't really responsive on the pages.

Microsoft has spent a lot of time and money on accessibility and making sure the native web parts work well on most screen sizes. The fixed width is a common web standard now because of the different sizes and resolutions of monitors that exist today. Take a quick watch of this video by David Warner on why the white space exists http://warner.digital/modern-sharepoint-pages-layouts-and-whitespace/

 

View solution in original post