With ACM, as text increases the image shifts to the left.

whitetiger

In a Purity-IV template I'm using JoomlArt Advanced Custom Module with "Hero Style-2".
As you increase the text, the image shifts to the left as you can see from these two screenshots
Few text
More text
The module has the name "Home Slideshow" and is the sldeshow position.

dominic

Hi whitetiger,
After reviewing your website, I noticed that the height of your image is smaller than the right content box. To ensure that the background image covers the box appropriately, we are utilizing CSS. In order to achieve this, I suggest using an alternate image with dimensions around 1240x1200px. Alternatively, you can navigate to the Tools panel and select the Edit Custom CSS button. From there, you can add the following CSS code to resolve the issue:

.acm-hero.style-2 .hero-content {
    padding: 6rem 6rem;
}

Hope this help!

whitetiger

dominic
In another post I asked how to change the size of the box because in some contexts it may not be convenient to insert very large images.
With the CSS change, the image is back in place, however I did not understand why increasing the amount of text should move the image since there is a lot of space available for the text.

dominic

Hi whitetiger,
We are using the background image size cover.
The cover value, as the name implies, ensures that the picture is scaled to fill the full container, leaving no empty space, while maintaining its ratio. If the proportions of the background image and the element differ, the image’s width or height will be cropped.
Also, Padding is used to create space around an element's content, so there is a lot of space available for the text

If in some contexts it may not be convenient to insert very large images. You can vary the height of the module from the Extra field tab when editing the module. Select the Spacing top and Spacing bottom that you want to change.

Or you can add a custom Class for the module and use the following CSS code to edit:

.your-class-module .acm-hero.style-2 .hero-content {
    padding: 6rem 6rem;
}

I hope that my message has been clear and easy to understand. Please let me know if you have any questions or need further clarification.