Page cut off on mobile devices

7 replies · opened Nov 2, 2016

DdafrenzNov 2, 2016

Hi,
Firstly, thanks for this great product, it looks amazing!

I'm having an issue with the parallax template when viewed on mobile devices. The first part of the page is getting cut off. If you check out the site here: www.infovisuals.com.au you will see that the top of the page is being cut off and you can not see the title of the page. It works fine on desktop browsers but on Safari, Chrome and Firefox on mobile devices, the top of the page is cut off.

Are you able to help with this problem?

Thanks so much,
Mark

DdafrenzNov 3, 2016

Is anyone able to help on this? I'm expecting a lot of traffic from mobile devices so its really important this works correctly.
I'd really appreciate some advice on this issue.

Thanks,
Mark

SSemicolon WebSTAFFNov 4, 2016

Hello,

Apologies about the Delay in replying. We have just checked out your Website on an iPhone 7 Device and it appears to be working fine for us: https://www.dropbox.com/s/825gjj8oodp7zmy/Photo%2005-11-16%2C%203%2058%2019%20AM.png?dl=0 . Can you please let us know which Browser/Device you are using so that we check this out further. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

DdafrenzNov 6, 2016

Thanks so much for your reply.
I apologise, I made some changes and must have managed to fix the problem but had some sort of cache problem not showing the updated page. As you mention, it now appears to be working!

Thanks for your help and the great template!

Mark

SSemicolon WebSTAFFNov 6, 2016

Hello,

Thank You so much for the Kind Words! And Really Glad that your issues were resolved. Thanks for your Patience.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

DdafrenzDec 12, 2016

Hi guys,
Sorry, but the issue seems to be back. I've tried the site on a number of mobile browsers including Safari on iOS (iphone 5) and firefox and chrome on android (nexus 5). It seems as though the page centers the content vertically but any content that goes over the top or bottom of the initial screen dimensions is cut off.
Is there a way I can just modify the version of the page that gets shown on small devices? I am happy with how it works on desktop browsers and on tablets so I don't want that to change but the title of the site cuts completely cut off on the smaller screen sizes. The attached screenshot shows what I see on an iphone (other phones are very similar).

Any help you could provide would be greatly appreciated.

Thanks,
Mark

DdafrenzDec 12, 2016

setting to unresolved

SSemicolon WebSTAFFDec 14, 2016

Hello,

We have checked out your Website and the Issue is that there are many Sections on your Website which are outside the #wrapper Container which causes many issues. Always add all your Content inside the #wrapper Container as provided in the Sample Templates. Please make sure that you follow the correct HTML Structure of the Canvas Template which can be found in the Documentation > Start > HTML Structure Section.

This should definitely fix your issue. Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard