Salesforce Certified Platform Developer II — Question 24

<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?

Answer options

• A. <lightning:layout multipleRows="true"> <lightning:layoutItem size="12" mediumDeviceSize="6" largeDeviceSize="4">{!v.account.Name} </lightning:layoutItem> <lightning:layoutItem size="12" mediumDeviceSize="6" largeDeviceSize="4">{!v.account.AccountNumber} </lightning:layoutItem> <lightning:layoutItem size="12" mediumDeviceSize="6" largeDeviceSize="4">{!v.account.Industry} </lightning:layoutItem> </lightning:layout>
• B. <lightning:layout multipleRows="true"> <lightning:layoutItem size="12" largeDeviceSize="4">{!v.account.Name} </lightning:layoutItem> <lightning:layoutItem size="12" largeDeviceSize="4">{!v.account.AccountNumber} </lightning:layoutItem> <lightning:layoutItem size="12" largeDeviceSize="4">{!v.account.Industry} </lightning:layoutItem> </lightning:layout>
• C. <lightning:layout multipleRows="true"> <lightning:layoutItem size="12" mediumDeviceSize="4">{!v.account.Name} </lightning:layoutItem> <lightning:layoutItem size="12" mediumDeviceSize="4">{!v.account.AccountNumber} </lightning:layoutItem> <lightning:layoutItem size="12" mediumDeviceSize="4">{!v.account.Industry} </lightning:layoutItem> </lightning:layout>
• D. <lightning:layout multipleRows="true"> <lightning:layoutItem size="12" mediumDeviceSize="6">{!v.account.Name} </lightning:layoutItem> <lightning:layoutItem size="12" mediumDeviceSize="6">{!v.account.AccountNumber} </lightning:layoutItem> <lightning:layoutItem size="12" mediumDeviceSize="6">{!v.account.Industry} </lightning:layoutItem> </lightning:layout>

Correct answer: C

Explanation

Option C is correct because it sets the mediumDeviceSize to 4 for each layout item, which allows for three items to be displayed in a single row on larger screens like desktops and tablets. Options A and D have incorrect size settings that would not accommodate three items in a row, while option B does not account for mediumDeviceSize at all, which is essential for responsive design on various screen sizes.