Text not aligned properly in the different viewports
Author: E.G. Teljeur
Visited 1245,
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
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.
Author
Thanks, Aleksej. That was the first thing I tried, but I had no luck there.
Check the margin setting in your text object. Perhaps the text reacts differently at each break point.
Author
Thanks, Siegbert. The margins are default 5. I changed them to 0. It makes no difference.
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.
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;
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.
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.
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.
Author
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 :-(