0

Consider the code below:

<template>
    <lightning-layout multiple-rows="true" horizontal-align="spread" vertical-align="center"
            class="slds-p-horizontal_medium slds-box">
        <lightning-layout-item>
            LOGO
        </lightning-layout-item>
        <lightning-layout-item>
            MESSAGE SOMETIMES
        </lightning-layout-item>
        <lightning-layout-item>
            BUTTON
        </lightning-layout-item>
    </lightning-layout>
</template>

Which is working ok for large and medium screens, but on really narrow ones I'd like to move MESSAGE SOMETIMES to row below button and logo. Right now it wraps button and then message when screen size reduces.

What is an elegant way to solve this? Are there better ways to solve such problem?

1
1
+400

You can use this way as shown below,

<lightning:layout multipleRows="true">
  <lightning:layoutItem smallDeviceSize="12" mediumDeviceSize="6" largeDeviceSize="3">
    <c:somethinghere /> ---Add your component or do something
  </lightning:layoutItem>
</lightning:layout>

you can set the smallDeviceSize,mediumDeviceSize & largeDeviceSize attributes which can be responsive with multiple screens

1

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.