7 replies · opened Jan 14, 2021
Hello -
I have the theme live and the Go to Top functionality is working fine on the desktop versions of the site. It is not appearing on the phone and tablet versions. Can you see why that is and how I can fix it? It is delivered on the bottom right of the desktop site.
Thank you!
Hello,
Simply add the data-mobile="true" Attribute to the #gotoTop Element. Example:
[ch_pre][/ch_pre]
This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Thank you for looking at this and it makes total sense. However I have done as suggested and it is still not appearing on mobile or tablets. I purged cache and actually used a completely different phone to ensure that it wasn't using cached pages and it still isn't showing. I know the updated file is loading because I can verify the new code by viewing the source on the desktop browser and I also added a Zoho chat script to the footer (like the Go To Top) and the chat script is there on mobile.
Please let me know if I am missing something.
Thanks!
Hello,
We have just checked out your Page and the Code is working fine (see attached). The issue with this is related to the Customization Errors we have mentioned here: http://support.semicolonweb.com/forums/topic/issue-with-process-steps-on-mobile/#post-23887 .
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
The screenshot you attached above is not what I see. I did update the style sheet as you noted and that helped. I can see the Go to Top on on the iPad, but not on the phone. I am attaching screen shots.
Do you think it has something to do with this code in the style.css?
body:not(.device-touch) #gotoTop {
transition: background-color .2s linear;
-webkit-transition: background-color .2s linear;
-o-transition: background-color .2s linear;
}
Thank you.
Hello,
There are custom codes in the style.css of your Website which is causing this issue:
[ch_pre type="css"]@media (max-width: 767.98px) {
#gotoTop {
display: none !important;
}
}[/ch_pre]
This code does not exist in the Default Files provided. Please make sure that you track your Customizations so that there are no unnecessary issues on your Website.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Ok that makes sense. I'm sure that will fix it. However, I wanted to note that I loaded the style.css two days ago from the original download I got of Canvas. The change you mention above is way above my pay grade and I can't imagine making it. I am working in Bootstrap for the first time and don't really understand how to use @media. It might be that I have an old version of Canvas, but it might be worth checking the default style sheet on your end as well just to make sure it's not in there.
I really appreciate your help on this and other issues! It's OK to close this thread.
Hello,
We assure you that this Block of Code does not exist in the Default style.css File. You can safely delete this. Additionally, we recommend adding your Custom CSS Codes in the css/custom.css File as this way you won't need to edit the Code CSS Files and you can track your Customizations more easily.
Hope this Helps!
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