Image set to alway be at the bottom of a column

Hi,

On my homepage of https://hadleylearningcommunity.org.uk/seconday, i have an image of the top part of a phone. i have the image with a 0 bottom margin which sits it at the bottom of the column. However when i resize the browser to see how it looks on tablets / phone etc. the image is not on the bottom of the column any longer and rises up. Can i get the image to always be at the bottom of its column even when resizing?

thanks.

Hi King,

Thanks for writing in. Try adding this Content CSS to the page. Pro > Edit Page > CSS

@media (min-width: 768px){

    .el39 {
        display: flex;
    }

    .el39 .el48 {
        position: relative;
    }

    .el39 .el48 .x-img {
        position: absolute;
        bottom: 0;
        left: 0;
    } 
    
}



Hope it helps.

Thanks

haha! Works a treat. Thank you so much @albrechtx

Much appreciated. Have a great day :slight_smile:

We’re glad we could help. :wink:

hi @albrechtx Can i just ask that if i need to do this for other images on other pages, how would i find the codes i.e. you put .el39 and .el48. What do these correspond to and how do you find them?

thanks again

Hey @King,

Those are dynamic classes assigned to each element. Cornerstone uses that internally to apply styles to the elements. Because it’s dynamic, it changes if you edit your content. So what I’d recommend is, assign a class to your elements so you can target them specifically without breaking them if you change content. We have an article regarding adding a class to elements here. And, to demonstrate what I mean, please see this screencast (slow the video down or pause and play to follow along).

Thanks.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.