Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Jun 7
Edited: Jun 7

Problems with Text in Containers (detailed testcase)

Hi,

I started with Editor X, looks great but I have a problem with text in containers when resizing canvas to f.e. mobile.


Testcase:

Goto bottom: https://www.editorx.com/academy/containers

Button: Open the exercize on editor X

Goto section with image:

Then resize it with the handles to mobile.

But then the text is overlapping each other, see image below.


What I understood is that Editor X keep their respective distances, or would smart redesign it, so that this won't happen.

What's the way to prevent overlapping objects?




1

Hello! I am Dana form the Editor X team. There are 3 ways to prevent elements from overlapping each other: 1. By adding a grid to a container and placing the elements in different cells. See lesson here: https://www.editorx.com/academy/grid

2. to prevent elements from overlapping vertically simply use a stack: https://www.editorx.com/academy/stack


3. The magic of EditorX is that you can modify the layout and design per breakpoint. So if the unwanted overlap occurs on mobile, simply change the layout at that breakpoint by moving elements, changing margins or modifiying docking directions. Hope this helps, Dana




Jun 7

Thanks Dana for your quick answer. I tried (See inbetween in red) with following results :(


1. By adding a grid to a container and placing the elements in different cells. See lesson here: https://www.editorx.com/academy/grid


Even with a grid the objects don't re-allign. What do you get when you TRY a grid?




2. to prevent elements from overlapping vertically simply use a stack: https://www.editorx.com/academy/stack

When selecting more objects in this case there's no floating opting to stack them ( I have seen that option in other designs, so know what you mean). Don't know why it doesn't work now. Do you get a stack option yes?




3. The magic of EditorX is that you can modify the layout and design per breakpoint. So if the unwanted overlap occurs on mobile, simply change the layout at that breakpoint by moving elements, changing margins or modifiying docking directions

Ok I hear what you say. What I initially thought that the power of Editor X is that, you design on desktop and other breakpoints will automatically change. So you don't need to re-design the mobile layout again (like in the old editor; Ok you CAN do it if you want, but now I need to do it because the objects are not "responsive")

Is it still not fully functional? Or Is my expectation too big?

1

I completely understand your expectations. Editor X provides you with the tools to give you full control to decide the size and position of each element on every screen resolution. We currently have a few tools that will help you get your responsive site started, we recommend that you check out the designed sections and layouter from the add panel for reference. If you are struggling to create the responsive site, then we recommend for you to visit the academy X to learn about our editor. Here are some useful links to learn about the Grid: https://www.wix.com/editorx/academy/grid https://www.wix.com/editorx/academy/grid-editing Please let me know if you need further assistant or have additional questions. Dana