Logo not displaying on mobile devices (iPad to mobile phone)

3 replies · opened Jul 14, 2021

KKeitRonJul 14, 2021

I spent a lot of time creating the home page of a client's website with Canvas | The Multi-Purpose HTML5 Template. I use an app called Pinegrow to work on the template. When I look in the browser (Chrome and Firefox) on my desktop computer the logo of my client displays perfectly, but when I go to the domain on my iPad and mobile phone (LG Wing or Samsung) the logo is absent. This is problem number one.

The second problem is I can't see how to change the favicon. With other templates I've used I have never encountered these issues. I have purchased the Landkit template from https://themes.getbootstrap.com/store/good-themes. All modifications I've made worked well there.

I am including the URL for you to look at the website page and would like advice on solving the two points raised, please.

SSemicolon WebSTAFFJul 15, 2021

Hello,

Apologies for the Inconveniences caused and Thanks for your Patience!

We do not support nor Canvas is built to be used with Pinegrow. Also we do not endorse any Builder nor it is mentioned anywhere in the Item Description.

  1. The Logo used on Mobile Devices are Retina Logos due to the High Resolution of the Mobile Devices and upon checking your Codes we can see that the Retina Logo Codes exist, but the Retina Logo has not been uploaded to your Servers which is causing this issue. Check the Image attached. Simply upload this Logo http://topquality.co.za/images/logo@2x.png or simply copy the standard logo image here and the issue will be resolved.

  2. You can add your Favicon Image in the images/ Folder. And then simply add the following code in your Document's <head> Tag:
    [ch_pre]<link rel="icon" href="images/favicon.png" type="image/png" sizes="16x16">[/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.

KKeitRonJul 15, 2021

Thank you kindly. The logo is now appearing on smaller devices. The favicon is appearing as well.
I need a favour please. At the moment the logo is actually too big on mobile devices.
Then, how do I get the slides to operate automatically?
I really appreciate your assistance. Five-star support!

Thanks
Ron

SSemicolon WebSTAFFJul 16, 2021

Hello,

Very Happy to Help!

  1. To resize the Logo on Mobile Devices, simply use the following code:
    [ch_pre type="css"]@media (max-width: 767.98px) {
    #logo img {
    margin-top: 20px;
    margin-bottom: 20px;

    }
    }[/ch_pre]

  2. To make the Slider rotate automatically, simply replace the existing #slider Element Tag with the following:
    [ch_pre][/ch_pre]

5000 is 5 Seconds in milliseconds. You can change the value according to your needs.

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.

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