WebSite X5Help Center

 
E.G. Teljeur
E.G. Teljeur
User

Text not aligned properly in the different viewports  en

Autor: E.G. Teljeur
Visitado 1153, Followers 1, Compartido 0  

I've stumbled upon a little problem. 

This is the page layout;

This is the desktop viewport;

So far so all good.

This is the smartphone viewport;

But viewport 1 and two are all scrambled.

Viewport 1

viewport2

All text is centred in the text object. So, my question is, how can I fix this...

Publicado en
10 RESPUESTAS - 1 ÚTIL - 1 CORRECTO
Aleksej H.
Aleksej H.
Moderator

Hello. Perhaps you can solve the situation with the help of Responsiveness Settings. Try changing the order of the objects, similar to how it looks on the phone.

Leer más
Publicado en de Aleksej H.
E.G. Teljeur
E.G. Teljeur
User
Autor

Thanks, Aleksej. That was the first thing I tried, but I had no luck there.

Leer más
Publicado en de E.G. Teljeur
Siegbert G.
Siegbert G.
User

Check the margin setting in your text object. Perhaps the text reacts differently at each break point.

Leer más
Publicado en de Siegbert G.
E.G. Teljeur
E.G. Teljeur
User
Autor

Thanks, Siegbert. The margins are default 5. I changed them to 0. It makes no difference.

Leer más
Publicado en de E.G. Teljeur
Martin P.
Martin P.
User

Hi E.G.,

I assume that line 8 of your layout view is involved, that means two text objects, where the smaller one has one text column (A) and the other has three text columns (B). As you can see from your smartphone viewport, the display order is reversed B before A. That can be fixed by the numbering order.

Regarding the other views, in my opinion with this layout you can't align all column header descriptions, because their text size is different in the two text objects (e.g. A needs two lines, B needs four lines). Therefore the data start point, has always this offset between both. I think you have to separate the column headers from the data, into its own text objects, on a line line above the actual position. Or make two lines with five columns, which has the beauty, that you get more flexibilty to set breakpoints for smaller viewports.

Leer más
Publicado en de Martin P.
E.G. Teljeur
E.G. Teljeur
User
Autor

Hi Martin, I checked the display order for each viewport and for all four they are the same. Also in my humble opinion, text inside a text object should not be scrambled around when the page size is changed.

This text object on this page;

Has no header just plain text;

And the display order seems for all four viewports the same;

Leer más
Publicado en de E.G. Teljeur
Martin P.
Martin P.
User

Ok, it is line 6 in the layout which is fine. Every of your five product classes has its own text object. First please select the "align to cell width" button inside each of your text objects. That should get rid of the white space between column 1 and the others. Center also each text object horizontal inside each cell (marges).

What I ment with a column header is for example the text "CD dupliceren | pijzen per stuk:". This text length is different and doesn't fit into smaller viewsports in two lines for the other headers. The idea was to move this to another cell row of text objects, above the price data.

On the other hand your numbering order and breakpoints are correct. To be honest I don't understand, why cell 9 is displayed after cell 12 in the smartphone view and no breakpoints occured in viewport 1 and 2. Maybe refresh the preview function, by holding down the <Strg> key why you hit the preview button.

Leer más
Publicado en de Martin P.
E.G. Teljeur
E.G. Teljeur
User
Autor

I tried already the "align to cell width", and that made no difference. I understand what you say about the column header "CD dupliceren | pijzen per stuk:" but that header is divided into two lines and as a result, it's smaller than any other text in this object. The cell should size to the largest line. 

Leer más
Publicado en de E.G. Teljeur
Martin P.
Martin P.
User

Hi E.G. here is my test from your layout. The breakpoints are working. To be honest I would use only four columns and set the breakpoint in the middle.

Leer más
Publicado en de Martin P.
E.G. Teljeur
E.G. Teljeur
User
Autor
Martin P.
Hi E.G. here is my test from your layout. The breakpoints are working. To be honest I would use only four columns and set the breakpoint in the middle.

Thanks, Martin, it seems to work indeed. I will try that. I guess I've some work to do. There are approx 41 pages to update :-(

Leer más
Publicado en de E.G. Teljeur