Mobile devices are failing to display the logo as expected

Can anyone help me figure out why the logo is not displaying on mobile devices? I've already tried resetting my phone's network and web browser, as well as reducing the size of the logo from 100px to 80px. Despite these efforts, the logo still won't show up. Below is the code snippet for reference. Any assistance would be greatly appreciated. Thank you in advance. You can also view the working jsfiddle here

<header id="header" class="transparent-header" data-sticky-class="not-dark">

            <div id="header-wrap" style="height:180px;">

                <!-- Primary Navigation "
                ============================================= -->
                <nav id="primary-menu" class="style-2 center">

                    <!--<div class="container clearfix"></div>-->
                        <div id="primary-menu-trigger"><i class="icon-reorder"></i></div>
                        <div style="text-align:center">
                        <ul class="one-page-menu" data-easing="easeInOutExpo" data-speed="1250" data-offset="65" >
                            <li><a href="index.html"><div style="border-bottom:1px solid #000">Home</div></a></li>
                            <li><a href="about.html"><div>WHO WE ARE</div></a></li>
                            <li><a href="products.html"><div>WHAT WE TRADE</div></a></li>
                            <li><a href="services.html"><div>SERVICES</div></a></li>
                            <li><a href="logistic.html"><div>LOGISTICS</div></a></li>
                            <li><a href="contact.html"><div>CONTACT</div></a></li>  
                        </ul>
                        </div>
                </nav><!-- #primary-menu end -->
                <!-- Logo
                ============================================= -->

                <div id="logo" class="divcenter">
                    <a href="index.html" class="standard-logo" data-dark-logo="images/logo-dark.png"><img class="divcenter" src="images/logo.png" alt="Canvas Logo"></a>
                    <a href="index.html" class="retina-logo" data-dark-logo="images/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b5d9dad2da98d1d4c7def587cd9bc5dbd2">[email protected]</a>"><img class="divcenter" src="images/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="64080b030b24561c4a140a03">[email protected]</a>" alt="Canvas Logo"></a>
                </div><!-- #logo end -->
                <br>
            </div>

        </header><!-- #header end --> 

Answer №1

Modify the name of an image in your pictures directory

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5c4999a929ab5c78ddb859b92">[email protected]</a>to<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a36353d351a6822742a343d">[email protected]</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to toggle the visibility of a div when a button is clicked?

I have a container with a registration wizard, and I want to toggle the visibility of this container when a button is clicked. How can I achieve this? Check out the code snippet below. Thank you :) <div id="wizard" class="swMain"> <ul> ...

Issues arise with the HTML application cache while in offline mode after clicking the refresh button

I have encountered a problem with my web app that has been developed using application cache. I am currently testing it on Windows Phone 8.1 with the IE 11 mobile browser. Everything works smoothly when the internet connection is turned off and the web a ...

The functionality of XPATH does not seem to be properly executed with JQuery

<html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("[href!='http://w ...

What is the best way to limit the length of text in a div if it surpasses a

As I work on a website, users have the ability to add headings to different sections of a page. For example: M11-001 - loss of container and goods from Manchester Some headings can be quite detailed, but in reality, only the first few words are needed to ...

What is the best way to prompt users to submit comments with a popup textarea box?

Within my project, I have incorporated a dropdown list: <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select subject <span class="caret"></span> </but ...

Chrome is where all the action happens, while Firefox prefers to keep things on the left

After a long break, I returned to designing my website and re-learning CSS. My approach involved creating a WordPress-integrated site with minimal HTML/PHP work, focusing more on utilizing the available CSS classes and IDs provided by a template theme (Bla ...

Using d3.js to dynamically change the color of svg elements based on their data values

I was searching for a way to dynamically color SVG rectangles based on values from a dataset. If I were to create rectangles for each data entry, how could I adjust the rectangle's color according to the data value? Here is what I currently have: // ...

The JavaScript script to retrieve the background color is malfunctioning

I am currently working on developing a highlighting feature for an HTML table that will dynamically change the row colors on mouseover. Below is the code snippet I have been using, but it seems to be experiencing some issues. Any assistance would be greatl ...

What is preventing me from loading js and css files on my web pages?

I have developed a web application using SpringMVC with Thymeleaf and I am encountering an issue while trying to load javascript and CSS on my HTML5 pages. Here is a snippet from my login.html: <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...

Styling elements with CSS to achieve proper positioning

I am in search of a way to align rows utilizing the style property. The following HTML code is being transformed using XSL: <span style="white-space: pre; font-size: 8pt; font-family: Lucida console, Courier ">&lt;40 : item1</span>&l ...

When an element is appended, its image height may sometimes be mistakenly reported as

I am dynamically adding divs and I need to retrieve the height and width of an image. Based on this information, I have to apply CSS to the MB-Container class. For example: if the image is portrait orientation, set container width to 100%. If it's ...

Is it possible for me to include &x&y&z in my Sass code?

When working with Sass, I have the following code: asdf{ &-b&-c {font-size: 16px;} } And I want the generated CSS to look like this: asdf.asdf-b.asdf-c{ font-size: 16px; } Is it possible to achieve this in Sass without having to repeat th ...

Technique for updating URL when submitting a form on a webpage

I'm a newcomer to the world of coding and I have a simple issue that needs fixing. I want to create a form field where users can input the last segment of a URL provided to them. After entering this segment, I want the page to refresh automatically a ...

What could be causing my handle button to slide off the timeline towards the right?

I'm facing an issue with my volume bar component where the slider button is rendering outside of the timeline instead of on top of the progress bar. I need assistance in adjusting its position. // Here is the code for my volume bar component: import ...

Text in d3.js vanishing while undergoing rotation

I have been struggling for hours with what seems like a simple problem and haven't made any progress. I'm hoping to receive some valuable advice from the brilliant minds on stackoverflow. You can view my demo at I attempted to use jsfiddle to s ...

The mysterious behavior of CSS3 transforms on intricate rotations

When a div is viewed in perspective and has the transformations rotateY(-90deg) rotateX(-180deg), adding rotateZ(-90deg) to it results in a rotation of +270 degrees instead of -90 degrees. The new style of the div changes from transform: rotateY(-90deg) ...

Rotate CSS elements dynamically using jQuery

I'm trying to figure out how to change the rotation value of an image element in my code. Currently, the rotation is set to 315 degrees, but I want to change it to 0 when a click event occurs. Can anyone help me with this? ...

Angular 2 Login Component Featuring Customizable Templates

Currently, I have set up an AppModule with a variety of components, including the AppComponent which serves as the template component with the router-outlet directive. I am looking to create an AuthModule that includes its own template AuthComponent situa ...

Ensuring Equal Padding on Both Sides of a Div by Setting its Width

In search of a div that houses multiple inner divs with equal padding on the left and right edges. This is crucial for maintaining a fluid layout where the distance between the inner divs and outer div border remains consistent even when the window size ch ...

Using Bootstrap's card component, design a grid layout for your website

I am attempting to construct a grid using the Bootstrap 4 card component. After reviewing the documentation and utilizing the card-deck feature, I aim to have each row consist of two columns with the behavior similar to col-12 col-md-6. Additionally, the s ...