How to make image resizing more fluid?

Hi there,

can you share a screenshot of how you want it appear ?

Jup, here's a screenshot from the mockup

I would recommend adding the image into the yellow container, after all texts.

Then remove the negative top margin from the image block, add negative bottom margin to it instead.

Set the yellow containerz-index to 2.

SOLVED: I have adjusted the tablet & mobile settings of the blocks 🙈

ORIG:
Hello, thanks.

I have duuplicated the page (dev-page-url), moved the image-block below the text in yellow-container, removed top-margin, added bottom-margin, set yellow-container Inner z-index to 2, and now it looks good on desktop, but not on tablet.

Any idea about how to solve this?

Hi there,

i would approach the whole thing like so:

1. The Container block that has the S image block inside. Give it a CSS Class of: has-overlay-image
2. Select the Image Block and give it a CSS Class of is-overlay-image
3. Remove any negative margins that position the image for all device sizes.

4. Then you can use some CSS to position the image absolutely, relative to its container:

.has-overlay-image {
    position: relative;
}
.is-overlay-image {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate3d(-50%,50%,0); 
}

5. Now you just need to make sure that your Container Blocks have adequate padding to provide the space for the overlay image to site in.