1

I'm trying to incorporate some responsive design into a Lightning Web Component. Using slds-grid with responsive layouts sounds great, in theory. However, my LWC will be included on a Lightning Record Page in a 3 column layout. Some object types have it in the middle column, some on the right. On an example screen which is 1920px wide, this component is 1742px wide with both sidebars collapsed. With only the left sidebar collapsed, it is 1314px wide. With only the right sidebar collapsed, it is 1182px wide. With both sidebars open, it is 897px wide. That's almost a 2x difference between the widest and narrowest, and that narrowest value is less than half the actual viewport width. For pages where it is included in the right sidebar, that drops by more than half again, to 410px. So if I try to incorporate responsive design based on viewport width, it really does not help me at all.

Are there any techniques to make the design responsive to the top level Lightning Web Component in the stack? I see it might be possible to try to figure out where on the page the component is rendered (How to identify which region the LWC component is locating in App Page or Record Page?), but that doesn't get me very far, I don't think.

0

You must log in to answer this question.