Responsive Design Question for Website X5 Evolution 13 
Author: Jerald T.
Visited 2921,
Followers 1,
Shared 0
I'm having a problem with my title in the header, displaying properly in Responsive mode. It's happening primarily when displayed in my smart phone. I have taken to screenshots. One in landscape mode, and the other in portrait mode. As you will see, the P in my title, at the end, has been cut off. When I look at it in preview mode, at the lower breakpoints, I can see the letter fully. I have made numerous adjustments to correct the problem, and it's still, incorrectly displaying. Any help to resolve this would be appreciated? Thanks.
Posted on the
Jerald
I have looked at your site in Firefox, and at all resolutions, even in desktop mode, the p is obliterated.
Have you tried change the order so the title is in front of the logo? (see attached)
If that doesn't solve the issue, is the title a little "tight" within the text box, if so you may need to make the text box a little wider or the text a bit smaller.
Author
HI Esach..
Thanks for looking into it. I have tried all the above. I reduced the text, I put the title to the front. I even deleted the logo, just to see if it would fix the problem. It still kept coming out, with part of the P missing.
I have taken four screenshots, so you can see, what I see, at the various break points.
Thanks.
Jerald
These work-around may solve the problem, but please see next post because I suspect that solves the real issue.
Jerald, I had a similar issue recently. I found that the text in the box was being automatically resized because the box was too small and I did not realise it. In my case I fixed it by using a (much) smaller point size for the text. Sadly it meant I ultimately had to use a different text box (with the same wording) for each resolution.
Have you tried simply adding a couple of spaces after the P to provide padding (perhaps alt 0160 to create a hard space)? And have you tried left, centre and/or right justify for the text?
Jerald - I think I might know why you are having the issue!!
What font are you using for the heading? If I don't have the exact same font on my PC or on a mobile, it will be replaced by something similar, it appears that all similar fonts take up more spacing and the P gets cut off.
This was not an issue in V12 and before because the text in the header was turned into an image on your PC, but now with real text in the headers and footers (good for search engines) this is an issue.
I now use google fonts to embed the required website fonts and only use those throughout the site because it stops surprises :-)
Author
Hi Esahc.. I suspect that is the problem exactly. The font i'm using is Miriam. It didn't occur to me, that the font could be replace, if mobile phones, didn't have the font in question. I'm going to try all the suggestions listed, and keep you posted. I now have a direction to work towards.
Thank you. This has been extremely helpful.
Jerald
Author
Hi Esach..That was the problem. You hit it square on. I changed from Miriam to Trebuchet MS and it worked. I can now see all the lettering in my Title.
Do you think this problem could be fixed, in the next update or version, since the text is no longer an image?
Thanks for all your help.
Jerald
Jerald, there is not much that Incomedia can do about the implementation of web standards on various platforms (without damaging the ability to search for text in headers & footers of sites). I recently became aware of the fact that "Times" is no longer a "safe web font". I used Times New Roman in Win10. In Firefox on Android it was interpreted as sans serif and through Chrome it was a version of Times, but the size was totally different and obliterated a logo.
To overcome this I found Scheherazade in fonts.google.com, downloaded it, added the import code in WX5 preferences "@import url('https://fonts.googleapis.com/css?family=Scheherazade');" and stored the ttf file with my project so WX5 could find it for local display. When I used this font my header was EXACTLY as I designed it on all devices at all resolutions.
http://quayssanremo.com.au/
I suggest you do the same. Find the font you want then embed it in the website.
Your site header now looks great, and on my PC with the same font installed it looks identical to what you see. However, on Mac's, tablets and phones I'll bet your preferred font is replaced with a generic sans serif font. It will look similar, but not the same and the spacing/length will change.
Have a great day!
Author
Awesome. I will do exactly that. Thanks again.
Could somebody hold my hand on thsi one please? I can't seem to get it sorted.
Pro 13
Duncan
Duncan
I recommend fonts.google.com (although there are others), choose the font you want. I use Roboto mostly, but on one site I needed Times, and since the version of Times on a Windows PC is not available on most mobile devices, I chose Scheherazade.
BEFORE you try add the font you will need to download it from fonts.google, I download the TTF and place it where I can find it (WX5 will ask where it is), I also install it into windows by simply double clicking on it and selecting install.
In fonts.google.com, select the font you want (click plus sign), a window will appear bottom right of your browser, click on it to open. Download button is top right so download and put the TTF where you can find it, then click @IMPORT tab and select and copy the import code to the clipboard (you do not need <style> </style> - see screen shot) Now crank up WX5, select preferences (this is bottom left hand side of screen when WX5 first opens (don't select start). Select web font tab, add font, fill in required fields, and paste import code.
Now you can use this font like any other font on your PC knowing that it looks exactly the same on any device and takes up exactly the correct amount of space (perfect for headers and footers).
If the above instructions are confusing or it does not work for you, please don't hesitate to advise where you get stuck.
I have put the .ttf .woff .svg and .eot files in the preferences. Do I need to upload them to the website?
I am trying to use AR-BERKLEY for the haeding but it is coming out as a standard serif font on computers where AR BERKLEY is not installed.
The website is http://endoflynx.uk - grateful for any assistance and advice.
Duncan
Duncan, I only include the ttf file, I always install the font (just double click the TTF or right click the file name), and as long as you paste the import code in preferences you don't need to copy the font to your website.
When displayed in any browser the font will automatically be embedded in your site from fonts.google.
Dear Esahc,
Thank you so much for your help. I am such a twit! I was tryng to embed a very similar font - but not the same one. Now I have embedded the correct font it works in the standrar embed dialogue and I do not have to go via google fonts.
If anyone would like the story of my experience, they are welcome.
Thank you once again for all your help