WebSite X5Help Center

 
David S.
David S.
User

Template Design  en

Author: David S.
Visited 294, 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
9 ANSWERS - 1 USEFUL
Paul M.
Paul M.
Moderator
Best User of the month EN

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

Read more
Posted on the from Paul M.
David S.
David S.
User
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

Read more
Posted on the from David S.
Esahc ..
Esahc ..
Moderator

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?

Read more
Posted on the from Esahc ..
David S.
David S.
User
Author

Checked the sticky bar and all OK . A little bit of tweeking. Made no difference to Welcome page.

Read more
Posted on the from David S.
Esahc ..
Esahc ..
Moderator

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.

Read more
Posted on the from Esahc ..
Esahc ..
Esahc ..
Moderator

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.

Read more
Posted on the from Esahc ..
Paul M.
Paul M.
Moderator
Best User of the month EN

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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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.

Read more
Posted on the from Paul M.
David S.
David S.
User
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

Read more
Posted on the from David S.
Esahc ..
Esahc ..
Moderator

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.

Read more
Posted on the from Esahc ..