Template Design 
Author: David S.
Visited 980,
Followers 1,
Shared 0
I have a problem when attempting to display web page on mobile phone. The Welcome page will only display on the left side of the screen. The header and footer colours and text colours on the headers and footers are incorrect. THe other pages display correctly except for incorrect colours of header and footer and text colour.
When all screen sizes are checked with the Preview everything appears normal.
WEb site display on Samsung TabA is OK except sticky bar not appearing on short page.
Web page displays correctly on laptop.
Appears that program is not compatiable with phones and Tablets
Posted on the
Hello David,
Can you please provide a link to the site in question so that we can look into this further for you?
Have you defined the various viewports in Template Settings in Step 1 for the lower resolutions?
Have you cleared your browser cache by reloading the page when checking for changes online after making modifications to your site?
WebSite X5 is fully compatible with phones and tablets.
Kind regards,
Paul
Search the WebSite X5 Help Center
Author
Hello Paul the website is mousetraptheatre.asn.au mousetraptheatre.asn.au
No I havent changed any setpoints. As I said it was only the Welcome page that seems to be affected. The remaining pages appear normal except for header and footer colours and text. I am looking from my Nokia 6.1 Android phone. Cache cleared each time.
Thanks
Dave
David, I too own a Nokia and I see the result you describe when using chrome browser, but if I view through Firefox then less so.
In firefox the sticky menu "has difficulty displaying" but when it does it is way too wide.
Can you check that all objects in the sticky bar are within the displayable area for tablet and mobile resolutions?
Author
Checked the sticky bar and all OK . A little bit of tweeking. Made no difference to Welcome page.
David, there is definitely something in either the header, footer or sticky bar, this screen shot from desktop firefox shows the horizontal scroll bar indicating there is something extending to right.
It could be an image or perhaps an image used as a background colour?? Check for "handles" there should be 8 visble around each object (just click on any object and you will see them).
The problem is evident at small tablet and mobile view.
Hmmmm.... interesting, the problem does not appear on some other pages (eg workshops).
Does the home page correctly display in desktop preview at low resolutions (ie no horizontal scroll bar)? If so the site may be victim of only a partial update.
Assuming preview (after ctrl+preview) is good on your PC, upload the site again but instead of new and changed, select upload ALL website files.
Thanks for the link.
There are a large number of non-breaking spaces in the heading, which should be deleted:
<div class="imHeading1 imTACenter"><span class="cf1">Mousetrap Theatre Company</span></div><div class="imHeading2 imTACenter"><span class="cf1">Redcliffe's Premier Little Theatre</span></div><div><span class="cf1"></span></div> <br></div></div>
Delete the line break also (the <br> tag) as included above.
Your issue is almost identical to this one:
https://helpcenter.websitex5.com/en/post/213137
Issues like this are usually caused by copying and pasting richly formatted text into WebSite X5, as opposed to manually typing the text into the editor.
Author
Hi Paul redid the sticky bar and the first text box containing all the breaks. All seems good now on the phone. The only other minor problem is with the Workshop page with only one text row. When I view this with the Tablet the Sticky bar wont roll down so I cant get out of this page unless I use the goback on the tablet. I will put another row into this page and hopefully will cure that problem.
Thanks for your help
Dave
David, under page properties, graphic you now have the option to hide header (and footer) for this page. If you do so the sticky bar will always be visible.