Align horizontal lightning layout item

csslightninglightning-layoutsmobileresponsive-design

I have this lightning layout and it's align end, but I need when it's mobile, the align need to be center and width 100%.
I told about use this css:

"@media screen and (max-width: 480px){}"

But I don't know if it's possible to edit an atribute like "horizontal-align", so, I also tried to align with css only but I didn't succeeded yet.
How do this?

<lightning-layout horizontal-align="end">
                <div>
                    <lightning-layout-item size="12" medium-device-size="4" padding="around-medium">
                        <lightning-button variant="base" label="Cancel" onclick={cancel}></lightning-button>
                    </lightning-layout-item>
                    <lightning-layout-item size="12" medium-device-size="8" padding="around-medium">
                        <lightning-button variant="brand" label="Proceed" onclick={proceed} disabled={disabled}></lightning-button>
                    </lightning-layout-item>
                </div>
            </lightning-layout>

Best Answer

Yes, you can use media queries to alter the layout, but since we can't change custom component properties like we can normal properties, we'll just have to make two copies; one for the smaller view, and one for the larger view:

<template>
    <lightning-layout horizontal-align="end" class="desktopButtons">
        <lightning-layout-item>
            <lightning-button-group>
                <lightning-button class="slds-p-horizontal_medium" variant="base" label="Cancel" onclick={cancel}>
                </lightning-button>
                <lightning-button class="slds-p-horizontal_medium" variant="brand" label="Proceed" onclick={proceed}
                    disabled={disabled}>
                </lightning-button>
            </lightning-button-group>
        </lightning-layout-item>
    </lightning-layout>
    <lightning-layout class="mobileButtons" horizontal-align="center" pull-to-boundary="small">
        <lightning-layout-item size="6">
            <lightning-button stretch variant="base" label="Cancel" onclick={cancel}>
            </lightning-button>
        </lightning-layout-item>
        <lightning-layout-item size="6">
            <lightning-button stretch variant="brand" label="Proceed" onclick={proceed} disabled={disabled}>
            </lightning-button>
        </lightning-layout-item>
    </lightning-layout>
</template>

Now, you just need some CSS to go with it:

@media screen and (min-width: 480px) {
    lightning-layout.mobileButtons {
        display: none;
    }
}
@media screen and (max-width: 480px) {
    lightning-layout.desktopButtons {
        display: none;
    }
}

Demo.

Related Topic