LWR Sites for Experience Cloud

LWR Sites for Experience Cloud
Get to Know the LWR Templates
Start Building Your LWR Site
Create an LWR Site
Create Custom Pages
Create Theme Layouts in an LWR Site
Create Components for LWR Sites
Component Properties
Base Lightning Component Limitations
User Interface API
@salesforce Modules
Lightning Navigation
Make a Custom Lightning Web Component Screen-Size Responsive
Create Custom Layout Components
Create a Custom Navigation Menu Component
Publish Your LWR Site
Brand Your LWR Site
Create a Multilingual LWR Site
Add More Customizations
Manage Data in LWR Sites
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Make a Custom Lightning Web Component Screen-Size Responsive

For enhanced LWR sites, you can assign separate values for the desktop, mobile, and tablet versions of certain properties in custom Lightning web components. With screen-responsive properties, the component uses the correct property value based on the end user’s screen size.

To make your custom Lightning web component screen responsive, follow these general steps.

1. Declare a Property as Screen-Size Responsive

In the component’s configuration file, componentName.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, here’s the code for the maximum height of a custom button component.

Here’s the code for the alignment of a child component of a custom banner component.

2. Use CSS Variables to Define Media Queries

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, here’s the code for the maximum height (property maxHeight) of a custom button component.

The screen-responsive property applies only to style properties, not expressions. Expressions (such as JavaScript or data-binding expressions) set at CSS values aren’t resolved at runtime.

Important

Here’s the code for the alignment (property bannerAlignment) of a custom banner component.

Enhanced LWR sites use the same breakpoints as shown in this example to distinguish between each view mode. To give your users the best experience, use these breakpoints when you define media queries.

Note

3. Specify the Property Values for Each Screen Size

After you declare a component property as screen responsive, specify the values for each screen size in Experience Builder. In the component’s property panel, an icon indicates screen-responsive properties.

Section property panel, showing screen-responsive icon

By default, smaller screen sizes inherit the property values that you specify for larger screen sizes. To set a property value for a particular screen size, use the dropdown menu in the navigation bar to switch between view modes.

4. Publish the Site

After you specify a property’s values for different screen sizes, publish the site. When you publish, the CSS custom variables are added in the host class of the generated component.

For example, here’s the code for the maximum height of a custom button component.

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