<lightning:layout multipleRows="true"> <lightning:layoutItem size="12">{!v.account.Name} </lightning:layoutItem> <lightning:layoutItem size="12">{!v.account.AccountNumber} </lightning:layoutItem> <lightning:layoutItem size="12">{!v.account.Industry} </lightning:layoutItem> </lightning:layout> Refer to the component code above. The information displays as expected (in three rows) on a mobile device. However, the information is not displaying as desired (in a single row) on a desktop or tablet. Which option has the correct component changes to display correctly on desktops and tablets?
Select one answer.
Marked answer: C
Community Discussion
Written by other learners. Comments can disagree with the marked answer — check the official documentation when in doubt.
1
Answer is A. The lightning:layoutItem components are assigned sizes based on device sizes (medium and large) to control the layout behavior on different screen sizes. In option A, the sizes are set to "6" for mediumDeviceSize, indicating that each layout item should take up half the width on medium devices (like tablets) and "4" for largeDeviceSize, indicating that each layout item should take up one-third of the width on large devices (like desktops). This configuration allows the information to display correctly on desktops and tablets in a single row, with each item taking up the appropriate width based on the screen size.
1
C is the correct
Chose C4
Each component will take up all 12/12 columns of a row on small devices, but for medium and larger devices each component will take up 4/12 columns of the row and hence all 3 components will appear in one row