Image - Poster text position

beccadunlop · December 22, 2020

I'm updating a site for a customer who wanted a square image - poster block to display the page titles.

They want the text to be positioned at the bottom of the image on all devices.

At the moment, using the below code, I've managed to make it sit at the bottom on the mobile view, but not the desktop.

Please can anyone help me with code to make it do both?

Thanks

hr { padding: 1px 0 1.5px 0;}
.design-layout-poster .image-title-wrapper {
    margin-top: 190px;
}

tuanphan · January 2, 2021

Hi.

Remove your code & add this code

/* Align poster title */
figure.design-layout-poster figcaption.image-card-wrapper {
    align-items: flex-end !important;
}

beccadunlop · January 5, 2021

That was just what I needed. Thank you so much.

Recommended Posts