Problem I try to solve

I want to display a website as a "sidebar" on the desktop. At the moment, I'm applying this with the following CSS:

:root { width: 420px }

Problem: This only changes the container width and not the window width; as a result, the "Desktop" version of the website is displayed instead of the mobile layout -- i.e.,@media queries are not affected by the CSS solution

Describe the solution you'd like

• Solution 1: Add new website settings in the app to define left, right, top, bottom of the browser window. Default is "0" for all values to get a full-screen website.

• Solution 2: Add new website settings in the app to define window width (pixel or percent), and align [left|center|right]. Default might be "100%" and "center"

Additional context

This is how the "sidebar" currently looks:

This is how I'd like the sidebar to appear, with a quick mock of the Solution 1 settings in the website settings: