What values does Lightning use to make the Small, Medium, Large, and Xlarge width determination?

Make Your Lightning Page Components Width-Aware with lightning:flexipageRegionInfo

There is nothing specified here:

Flexipage Region Info


Added based on comments

As a standard you get only 4 values as stated. If you want to render based on custom width/height, you can use media queries

The Media Queries Level 4 specification includes some syntax improvements to make media queries using features that have a "range" type, for example width or height, less verbose. Level 4 adds a range context for writing such queries. For example, using the max- functionality for width we might write the following:

@media (max-width: 30em) { ... }

In Media Queries Level 4 this can be written as:

@media (width <= 30em) { ... }

Using min- and max- we might test for a width between two values like so:

@media (min-width: 30em) and (max-width: 50em) { ... }

This would convert to the Level 4 syntax as:

@media (30em <= width <= 50em ) { ... }

Media Queries Level 4 also adds ways to combine media queries using full boolean algebra with and, not, and or.


You need not worry about the values used by flexipageRegionInfo. Just note that it will return the values SMALL, MEDIUM, LARGE, or XLARGE

Below is the sample:


<aura:attribute name="width" type="String"/>
<lightning:flexipageRegionInfo width="{!v.width}"/>

width = {!v.width}

lightning:flexipageRegionInfo will set the value of width which will be set on attribute because of 2-way data binding

Now put this component in different regions of flexipage to verify.


enter image description here

| improve this answer | |
  • The problem I have is that I'm trying to render the elements in a component differently when the size is less than MEDIUM, but not SMALL. – Michael Sobczak Sep 19 '19 at 19:57
  • @salesforce-sas Not sure if your updated answer is relevant here, because media queries deal with screen size, not element/container size into which the component was dropped. I was wondering the same thing as OP, since if you do a determination of what SMALL is in comparison to MEDIUM, you would also have to define a breakpoint. – Michael Feb 10 at 11:44

The values are based on template metadata.

See this doc how it is declared in custom templates - the standard templates have the same defined: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_config_for_app_builder_template_component.htm

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.