Make a Custom LWR Component Screen-Size Responsive

For enhanced LWR Experience Cloud sites, your custom Lightning components can have screen-size responsive integer and string property values for mobile, tablet, and desktop. With screen-size responsive properties, the component uses the correct property value based on the end user’s screen-size. This feature provides experiences that are dynamically rendered based on screen-size. For example a string property can be used to set the alignment of text or a child component. By making that property screen-size responsive, the component can have different alignment depending on the current screen size.
  1. Declare an integer, string, or both properties as screen-size responsive.
  2. Define media queries by using CSS variables for each screen size.
  3. Specify the property values for each view mode using Experience Builder.
  4. Republish the site.
Declare a Property as Screen-Size Responsive

In the component’s configuration file, <component>.js-meta.xml, declare an integer, string, or both properties as screen-size responsive by using the screenResponsive attribute with a value of true, and the exposedTo attribute with a value of css.

For example, for the maximum height of a custom LWR Button component

<targetConfig targets="lightningCommunity_Default">
    <property name="test" type="String" default="Button"/>
    <property name="url" type="String"/>
    <property name="maxHeight" type="Integer" min="0" max="20" default="0" screenResponsive="true" exposedTo="css"/>
...

For the alignment of a child component of a custom LWR Banner component, for example

<targetConfig targets="lightningCommunity_Default">
    <property type="Color" name="borderColor" default="" />
    <property name="url" type="String"/>
    <property type="String" name="bannerAlignment" default="center"
    screenResponsive="true" exposedTo="css"/>
Define Media Queries Using CSS Variables

In the component’s .css file, use the CSS variable --dxp-c-screensize-property to define a media query, where

screensize can be l (for desktop), m (for tablet), or s (for mobile).

property is the property name in kebab case.

For example, for the maximum height (property maxHeight) of a custom LWR Button component
/* Desktop */
div {
    max-height: calc(var(--dxp-c-l-max-height)*1px);
}

/* Tablet */
@media only screen and (max-width: 64em) {
    div {
        max-height: calc(var(--dxp-c-m-max-height)*1px);
    }
}
/* Mobile */
@media only screen and (max-width: 47.9375em) {
    div {
        max-height: calc(var(--dxp-c-s-max-height)*1px);
    }
}

For the alignment (property bannerAlignment) of a custom LWR Banner component, for example

/* Desktop */
div {
justify-content: var(--dxp-c-l-banner-alignment, center);
}

/* Tablet */
@media only screen and (max-width: 64em){
    div {
        justify-content: var(--dxp-c-m-banner-alignment);
    }
}

/* Mobile */
@media only screen and (max-width: 47.9375em) {
    div {
        justify-content: var(--dxp-c-s-banner-alignment);
    }
}

Enhanced LWR Experience Cloud sites use the same breakpoints as shown in this example to distinguish between each view mode. Use these breakpoints when defining media queries for the best experience.

Note

Specify the property values for each view mode using Experience Builder

After a component property is declared screen-size responsive, its values are specified for each view mode using Experience Builder. In the component’s property editor, an icon indicates those properties. By default, responsive property values set for the larger screen sizes are inherited by the smaller screen sizes. To set a different responsive property value for a smaller screen size, switch between the different view modes and set the corresponding property value there.

Custom Component Screen Size Responsive Property

Republish the Site

After a property’s values are specified for different screen sizes using Experience Builder, republish the site. By republishing, the CSS custom variables are added in the host class of the generated component.

For example, for the maximum height of a custom LWR Button component
<dxp_base-button data-component-id="button-0b67" slot="column"
                 style="--dxp-c-l-max-height:100; --dxp-c-m-max-height:80; --dxp-c-s-max-height:60;">
...

In this example, using Experience Builder, the component maximum height property is assigned a value of 100 pixels for desktop, 80 pixels for tablet and 60 pixels for mobile.