Smartphone and Website
Autor: Claudette Botha
Visited 2961,
Followers 1,
Udostępniony 0
Good day
I created a website but the website cuts off when I open it on my Smartphone and the fonts is also not showing like it should. How do I correct this? I want to see the website as it is on the desktop.
Thank you
Posted on the
Claudette, it would help us if you could provide a link to your site.
If content is being cut off on mobile this suggests it is too big at that resolution. If everything looks good on desktop, move to next resolution down in step 2 template content and resize objects as necessary. If the object is title text, do not choose a smaller font, you can tick a box so that text resizes automatically as space available is reduced. Move down to each resolution and adjust as necessary. For every object all 8 handles should be within the available space.
As for fonts, please make use of google fonts.
Go to any text box and select font, other font types. Choose a google font and use that instead of a local font on your PC. This will ensure the font you choose will always display on any device.
Autor
http://www.lesouvenir.co.za/
Here is the link to the website. I see that it is not only fonts thats cutting off on cellphone. Thank you for your help.
Claudette, I see that you are running v13 and you do not have responsive turned on. This means that on a mobile your will only ever see a shunken version of your website. If you wish to make your website responsive you will need to turn it on in step2 template, resolutions and responsive, but this also means that you will need to do a significant amount of work in the headers and footers for each resolution.
Back in v13 adding a webfont or google fonts was not as straight forward as it is in current versions, all the instructions can be found in the wx5 help. on my version the link is http://help.websitex5.com/en/v13/pro/index.html?resolution_rwd.htm&utm_source=software&utm_medium=Professional_13 but if you wish to search through your help, click search and search for "google fonts"
You can also load web fonts, but I strongly recommend google fonts.
You are using a font that is available on most PC's but not on most mobiles for the text (eg Welcome at Le Souvenir), you need to embed a suitable google font and then use it for that heading, it will work for every device.
If you are noticing that text is being cut off or is not formatted correctly it is almost certainly because your chosen font is not available on mobiles and the replacement (default) font has slightly different parameters (ie might be bigger or smaller). You need to consistently use websafe fonts or google fonts to stop this happening.
Autor
I had responsive on, until I saw that it cuts of the website so I turned it to Desktop view. If I do turn responsive on, what will I have to do to fix it?
I also noticed that when I insert a link to text, it changes the colour of the text and I cannot change it back. Do you maybe know why it does that?
Thank you for your kind assistance, its really appreciated.
Claudette, to change the colour of a link you need to go to step 2 template, customise, text style. This changes the link colour for the whole project.
To work with your project I would temporarily leave it as a desktop site. You will need to embed your chosen fonts. Back in v13 this was a little convoluted, so if you have ever considered upgrading to a supported (current) version of wx5 now would be a great time because adding google fonts is a snap.
Back in v13 you first have to go to fonts.google.com, find the font you want (eg EB Garamond), select the font and open the window that opens bottom rh side and under embed, select @import, copy the code and from memory paste it into step1 settings, statistics and seo, advanced, expert (hopefully someone will correct me if I am wrong, it's been a few years).
You also need to download the font and place locally on your PC from memory. Please look at the instructions in the help provided by WX5.
Once you have your fonts (which will displasy on every device), change your website accordingly and you can also set default fonts (page text) as in the screen shot above.
The alternative is to only use websafe fonts (which is a lot easier but today it occasionally fails the user) https://websitesetup.org/web-safe-fonts-html-css/
When your desktop site is perfect you can turn on responsive and start adjusting content for every resolution. This is a manual task unfortunately, much of it I have found to be trial and error. I will be pleased to try and answer any question you might ask.
(WX5 v2019 really does make life easier, fonts are easy to add and if the template you want exists, all the new v2019 templates are already laid out and set up for proper responsive display)
I will await your questions