WebSite X5Help Center

 
E.G. Teljeur
E.G. Teljeur
User

Text not aligned properly in the different viewports  en

Author: E.G. Teljeur
Visited 100, Followers 1, Shared 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...

Posted on the
8 ANSWERS - 1 USEFUL
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.

Read more
Posted on the from Aleksej H.
E.G. Teljeur
E.G. Teljeur
User
Author

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

Read more
Posted on the from 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.

Read more
Posted on the from Siegbert G.
E.G. Teljeur
E.G. Teljeur
User
Author

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

Read more
Posted on the from 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.

Read more
Posted on the from Martin P.
E.G. Teljeur
E.G. Teljeur
User
Author

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;

Read more
Posted on the from 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.

Read more
Posted on the from Martin P.
E.G. Teljeur
E.G. Teljeur
User
Author

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. 

Read more
Posted on the from E.G. Teljeur