SharePoint Modern Vertical Column on Small Screens

StephenBradley 

I was dealing with the same situation. The sharepoint modern sites are a bit strict on what you can do. I managed to not need the 90 % zoom by injecting javascript. I'll share the steps how I've found a solution:

• I already had a custom sharepoint webpart installed, that let's me inject custom javascript onto the page -> SharePoint Online – install Modern Script Editor Web Part for SharePoint Online Modern Site – Ashish Bhardwaj Blog (wordpress.com)
• Tried a lot of ways, messing with the elements styles. First tried with jquery, but couldn't get it to work with sharepoint. Finally I noticed something. When zooming in, so that the section column goes way, the style  disappears from the div

   

  
  

   

  Here's a print of the DIV, on my case (the webparts are covered):

•  In the end I got it to work copying the style of this DIV, and the two below (in my case it's a normal section and a colunm section) when the screen is okay, and setting it up when the screen is small. In the javascript I put:

if (window.screen.width < 1365){
	document.querySelector("#spPageCanvasContent > div > div > div > div").style.cssText = "-webkit-font-smoothing: antialiased;display: flex;margin: 0 auto;max-width: 1648px;user-select: text;color: rgb(0, 0, 0);font-weight: 400;font-size: 14px;-webkit-font-smoothing: antialiased;"

document.querySelector("#spPageCanvasContent > div > div > div > div > div.g_b_50a7110f").style.cssText = " -webkit-font-smoothing: antialiased; font-size: 14px; font-weight: 400; color: rgb(0, 0, 0); user-select: text; width: 75%;"

document.querySelector("#spPageCanvasContent > div > div > div > div > div.h_b_50a7110f").style.cssText = " -webkit-font-smoothing: antialiased; font-size: 14px; font-weight: 400; color: rgb(0, 0, 0); user-select: text; width: 25%;"

}

I think all those styles are not necessary, only the ones related to size.