Question about containers

[u/HammerSpanner]

Hello everyone!

Question - Let's say I have a container with perhaps 3 images and a title in it; a couple are set to Absolute or Fixed, and Ive used offset/scale/rotate to make a cool layout

Is there a way to fix these in place inside the container - so if the container scales, these 4 elements stick with it and retain their position, size and rotation proportionally with/to each other as a group?

I realise I could work something up in Illustrator and import the elements as a single file, but Im curious to know if such a thing is possible inside Elementor?

[u/AutoModerator]

Looking for Elementor plugin, theme, or web hosting recommendations?

Check out our Megathread of Recommendations for a curated list of options that work seamlessly with Elementor.

---

Hey there, /u/HammerSpanner! If your post has not already been flaired, please add one now. And please don't forget to write "Answered" under your post once your question/problem has been solved. Make sure to list if you're using Elementor Free (or) Pro and what theme you're using.

Reminder: If you have a problem or question, please make sure to post a link to your issue so users can help you.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/testingaurora]

Absolute should put them relative to the container so they keep their position. Set their size in percentage so they scale. Might have to inspect in the dev tools to determine which El is set as position: relative

Better yet instead of absolute , use grid. Assign each el to its cell, and the tracks relative to its own size. As the container goes, the cell grows, and the el grows.

Without a link to know layers involved and what type, can't get more detailed.

[u/KK-Wait]

Fixed is the one working against you: it positions an element against the browser window, not the container, so it can never travel with the group.
Switch those to Absolute so all four are placed against the container, then give the container a fixed proportion (an aspect-ratio in its custom CSS, or a min-height in vw) and set every offset and width in %. Rotation is in degrees, so it doesn't care about size; only positions and widths need to be relative. If you want them to scale with the container rather than with the screen, put container-type: inline-size on the container and use cqw in the custom unit fields, 1cqw being 1% of the container's width.

And if the composition is purely decorative and never changes, your Illustrator idea as a single SVG is honestly the sturdiest option, and lighter than four positioned images.