Is there any way to adjust the height and width of the components based on screen size?

Is there any way to adjust the height and width of the components based on screen size?

1 Like

Hi! Unfortunately, at the moment this is not possible.

Hi Grace

Is there any plan/timeline to implement this feature?

thx
john

I needed "responsiveness" of a container in the past and used this very simplistic approach in a transformer:

const width = {{ viewport.width }}

if (width < 576) {
  return 'xs';
} else if (width >= 576 && width < 768) {
  return 'sm';
} else if (width >= 768 && width < 992) {
  return 'md';
} else if (width >= 992 && width < 1200) {
  return 'lg';
} else {
  return 'xl';
}

It works for components that don't have too many settings otherwise you'll be duplicating a bunch. Leanest workaround I found so far.

adding functions setWidth and setHeight to components would be very useful.
But it could rapidly generate conflits in component layout.
However, wisely used, it would be very useful.

Feature request.

+1

:grinning:

+1