Hello!
i would like to use make a responsive overview page and i’m at a good point when displaying on PC (FHD) but i’m not able to make the column width adaptive on smartphone:
on PC the column width is 20 but on smartphone the width is 33 so i understand that on smartphone the mainUI sets the witdth for “width”. took a screenshot on the phone and resolution is 864x1872px.
That’s why you may find yourself wanting to let a column be 100% by default, so that it occupies the entire screen, and then reduce the width for medium or large breakpoints.
in other words, width is for the smallest screen on which you want to display the page. Then you define breakpoints to determine when your single column layout becomes 2-column, or 3, or more. Most smartphone screen widths are actually < 480px (equivalent pixels, not actual, it’s influenced by “retina” pixel densities etc.) so below even the xsmall breakpoint.
In fact if you go to the About page while logged in, then Technical Information > Details, you will see the dimensions of your screen as seen by the UI:
So in this case while the actual screen resolution is 1080x2340, the pixel ratio is 3 so the “perceived” screen size is a third of that in every dimension, so 360x780. Hope it makes sense.