Problems with Text in Containers (detailed testcase)

Ask the community
1

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:

2266×776 125 KB

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?

787×805 89.2 KB

2

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

3

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

  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?

1566×685 39.4 KB

  1. 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?

2390×907 168 KB

  1. 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?
4

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

5

I’m also having the same issues. It’s really frustrating :triumph:

6

@contact-miracleozule hey, unfortunately, without the screenshot or video we won’t be able to tell what exactly is happening with the mobile breakpoint of the site you are working with

but at the same time, in case that the issue is like the initial post got, such behavior could occur due to the layout change from desktop (wide screen) to mobile (vertical screen)
So, the content got to be re-adjusted according to the screen ratio.

Along with this, please note that you can use different grids for different breakpoints, which could help you to deal with such behavior. So, for example, 3x1 grid can got 1x3.

Here is additional information from Academy X:
https://www.editorx.com/academy/lessons/grid