Bottom align image to section + text float

[adrian.cares]

Hey ThemeX Crew,

I would like to create a text and image floating to the right. The image should be aligned with the bottom of the section.
I am only able to either get the floating right or the bottom alignment. How can I get both working?

Thx.

[thai]

Hi There,

I’ve added this inline CSS to your image and it’s at the bottom right now:

style="margin: 60px 0 0;"

Cheers!

[adrian.cares]

Hey Thai,
thanks for the response.

Then I would have to control the margin for each device via media queries. For example, the 60px would create an unnecessary space on a portrait phone view for example.
Is there a solution without introducing px margins but align the image with the section bottom?

[christian]

Hey @adrian.cares,

If you don’t use the margin, you need to use absolute position and also media queries. Either way, this would require custom development which is outside the scope of our support.

What I’d recommend instead is use the features available in Cornerstone. The setup takes a bit of playing around with the options but you’ll get the results you need without custom coding. Please watch the similar setup below.

Thanks.

[adrian.cares]

Love it. Thanks.
Swapping images similar to background images using media queries don’t work, right?

Like so:
@media screen and (max-width: 480px) {
.el1 .x-bg-layer-lower-image {
background-image: url(‘https://link-to-image.jpg’);
}
}

[jade]

Hi there,

That should working if you will use a correct CSS selector. For example this code:

@media screen and (max-width: 480px) {
    .el29 .x-bg-layer-lower-image {
        background-image: url('https://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg') !important;
    }
}

This will change the background of the section that contains Sei die Veränderung die du in der Welt sehen möchtest!
.
Hope this helps.

[adrian.cares]

Hey Jade,
I know this works for background images. Can I swap images embedded with the cornerstone image element as well via media query?

[ruenel]

Hello There,

Sorry for the confusion. The swap does not be automatic. You will have to hide the image and use it in your custom css media query.

With all your custom css, your layout will become more and more complicated. If we go back to your original layout, you just wanted to have a text and image on the right. If you use a row with two column layout, you can add the text in the left side and the image in the right side. You may check out the test page I created in the secure note.

Hope this helps.