2

The size breakpoints in SLDS are based on the screen size which works great for LWCs that occupy the full width of the screen e.g.:

<div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-3">
    ...
</div>

But I'd like my LWC to layout correctly when it is in (flexi-) pages that present it in 2 or 3 or 4 columns side by side where the relevant width is only a part of the screen.

Any suggestions for how to handle this?

Improve this question

1 Answer 1

Reset to default
2

AFAIK this related mechanism Make a Component Width-Aware is the only mechanism available:

@api flexipageRegionWidth;

It reports the flexi-page "region’s width" as:

  • SMALL
  • MEDIUM
  • LARGE

and you can use this name as a CSS style or otherwise react to the value such as using different SLDS classes. So a bit of work. See How to control LWC styling dynamically?.

But this is only a relative indication i.e. the relative size in page builder; the values do not change as the page is resized.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .