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:
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:
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 solutionDescribe 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), andalign [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: