Text Allignment Problem

[Tazz]

Hello everyone,

I have a strange problem happening in a site I have done, and can't seem to fix it. I have attached an image of two screen shots side by side to see the issue.

I have created a site with the full version, and a mobile variant. I have done a bunch of these the same way and have never experienced this issue. The text is great on the main site, but when I view the site on my mobile phone, all the text is going off the right side of the page, and I can not zoom out or scroll over to read it. Apparently the mobile site is locked in properly to it's size on a phone. But the text is going off the right edge and out of it's created borders.

I went back into Xara (Designer Pro X12), and step by step I re-created the text, changed the font to web safe, created another text box and copied and pasted text, etc...and nothing worked, publishing brings the same results every time.

Then I noticed the problem (I think), but can't seem to find a fix. When I select the text box in question with the "select tool" the handles on the selected area are way out to the right, off the page as seen in image 1 on the attachment. If I click the text box with the text tool, as seen in image 2, you can see the text area, where it's supposed to be. I don't understand. I have checked to see if I accidentally have something grouped with the text box, but I don't. No shadows or anything.

Can anyone help. Have you experienced this? I'm frustrated and can't figure out whats going on!

The temp site is online at www.firedupvb.tazzanderson.com

Thank you for any assistance in this crazy thing.

Tazz

[Tazz]

Just another note....When I preview the site on my computer and minimize the page to represent the mobile variant, it works and looks as it should. It's just the actual published version, and looking at it on a real phone that it goofs all the text up. I have attached showing a small piece of the menu in the preview looking great!

Tazz

[Tazz]

Ok, so i'm still playing around with this peculiar issue. Next step, I selected the background box (the white box that the text is sitting in front of) and then selected the text and grouped all objects together, saved, and published, and now it looks great and exactly as it's supposed to look. I did the same with the about us page, and it worked as well. What the heck??? Why would I have to place anther box behind text or group it to a rectangle to make it align properly within a page online (on the mobile variant)? That's kind of strange isn't it? But it works, so strange or not, if it works haha! Still if any one of you Xara guru's out there might know what is happening please enlighten me. I certainly don't want to have to get in the practice of placing extra rectangles every job and grouping them with my text in order to get things to work properly!

Tazz

[Egg Bramhill]

Grouping text is not a good idea Tazz as the text becomes an image and Search Engines can't parse image content. Late here, try again tomorrow.

[Egg Bramhill]

here's just part of your mobile menu copied from the site showing it's just an image.

[Egg Bramhill]

Another member had a similar issue the other day and I seem to recall it was that the text line was to long (wide).

Try using text Areas and NOT text columns.

[Tazz]

Another member had a similar issue the other day and I seem to recall it was that the text line was to long (wide).

Try using text Areas and NOT text columns.

Hi Egg, and thank you for your help.

For the menu sections, I have taken the text tool and drag out the text area to the width and length of the particular area of the menu page. Is that what you mean by area vs column? If so, I have done it all by areas.

I have created about a dozen or more websites with mobile variants (480 px) and never had an issue like this. I'm not sure what to do to fix it. Unless what you're suggesting is something different than what I'm thinking and doing. On the one image I attached, it shows the red dotted line of the text area (correctly where it should be), which is visible when I select the text tool...when I select the Selection tool it shows the handles off the right side of the page but that's not where I created the text area.

When you say the text area was too long (wide), you're not talking about the length top to bottom, but literally the width of the text lines. Mine are created within the width of that mobile variant page width. For example the appetizers text area is actually only 360 pixels wide. But my text when viewed is spilling way off the right side of the screen on the mobile phone.

Tazz

[Tazz]

I'm hoping I can still get someone to help me with this problem. I'm starting to think I have switched something on in the program that is causing my issue. I have attached another image from a totally different site I'm building, and the text area is where I seem to be having the problem occur. If you look at the attached image, on the left is the text area selected by the text tool, the line shows that the text area is perfectly within the page dimensions, right to left. When you select the text area with the select tool, you can see it selects an area, for some reason, outside the page dimensions. It shows it hanging way off the right side. The handles (little black squares) are way out there! If I select the handle and try to bring it back within the page dimensions, all the text shifts badly to the left and no longer is placed on the page correctly.

Does anyone know why this is doing this. The extended problem is when I created a mobile version of another site doing this, the text was way off the page to the right, when viewed on a phone. If I select the text box and group it with the background box, in this case that tan looking box, then the text looks great on the phone. But as Egg explained to me, that basically turns my text into an image, which I definitely don't want!

HELP???

Tazz

[Egg Bramhill]

I can reproduce the selector tool strange resizing but it still doesn't effect the displayed text on the mobile variant. That's why we need to see your xar file. Either zip it & attach it here or save it to Dropbox (or similar) and post your share link.

[Tazz]

I can reproduce the selector tool strange resizing but it still doesn't effect the displayed text on the mobile variant. That's why we need to see your xar file. Either zip it & attach it here or save it to Dropbox (or similar) and post your share link.

Good morning Egg,

Thank you again for your help. This has been quite frustrating. I have uploaded my .xar file into Dropbox, hopefully I did it correctly as I have never done that before with a Xara file. But here's the link to that folder.
https://www.dropbox.com/sh/y148nn8k7...kq3cavQca?dl=0

As of right now, I still have the text grouped with the rectangle behind it. That's the only way I can get it to display properly. By the way, I'm viewing the published file on an android, Galaxy S7 phone.

The link to the live (temporary) site is here: www.firedupvb.tazzanderson.com

Thanks again,
Tazz