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

Utilizing HTML Elements for Conditional Statements

I had a question regarding HTML code and JavaScript functionality that I came across while honing my coding skills. My curiosity lies in understanding how an HTML element can act as a boolean condition within a JavaScript while loop. Take, for instance, ...

`Place the image in the middle of the page`

I'm attempting to align the image directly before the text within the same div. I've applied CSS with text-align:center to the div, but it only seems to affect the text. Any suggestions on how to position the image right before the text? http:// ...

Utilize formData to upload an image to a database with ajax

I'm struggling with the process of uploading an image from an HTML form. The goal is for the form to send the image name along with other data to a PHP page. Instead of using the serialized function, I opted for formData as it has the capability to h ...

How to modify the background image of a div using CSS from a specific folder

<head id="Head1" runat="server"> <title>Title</title> <style> .parallax { /* The image used */ background-image: url(Pictures/BackUS.png); height: 100%; /* Create the parallax scrolling effect */ back ...

Updating the information displayed in one section by selecting a button on the Google Maps infowindow located in a separate section

My webpage is divided into multiple divisions. One division contains a map using the Google Maps API with markers. When I click on a marker, an info window opens up. Now, I am attempting to place a button inside that info window which, when clicked, will ...

What is the reason for the overflow occurring in a container of identical size due to this particular element?

I've encountered an issue while trying to create a div with a scrollbar that only appears when the elements within it don't fit the default area. <div style="overflow-y: auto; height: 36px;"> <img src="." width="36" height="36" /> ...

Steps for adjusting the matMenuTriggerFor area so it only triggers when hovering over the arrow

Hello there! I'm currently working on adjusting the trigger area for opening the next menu panel. Right now, the next menu panel opens whenever I hover over either the title or the arrow. However, my goal is to have the menu open only when I hover ove ...

Locate the index of each distinct element within the array

Let's define an array called 'arr' with some elements: [7, 9, 30, 40, 50, 8, 1, 2, 3, 40, 90,2, 88,1] We also have another output array defined as: [0, 1, 2, 3, 4, 5, 6, 7, 8 ,10, 12] I stored this code snippet on a javascript ...

Tips for keeping two divs aligned horizontally on a webpage

Currently diving into the world of Bootstrap 5, I am facing a challenge with keeping my links and the label "Testing" on the same line. Despite using text-start and text-end classes, they refuse to cooperate. How can I ensure that they both stay aligned ho ...

Tips for eliminating the border radius on select box elements within Bootstrap

I am currently using bootstrap v3.3.1 from the standard directory, and I am facing difficulty in removing the border radius from the select box components specifically in Google Chrome. This particular inquiry is unique because: Despite attempting to mo ...

Center column with header and footer flanking each side

Trying to replicate the layout of the Facebook Android app on my page. The app features a 3 column design, with the central column exclusively displaying the header (no footer included, although I require one for my version). This visual representation is ...

Suggestions for automatically adjusting the height and width of a div containing z-indexed content

I'm attempting to automatically adjust the height and width of the parent div that contains three stacked images, but the parent is not adjusting to the dimensions of the content. Even when the div and the last image are on the same z-index, it's ...

Tips on combining multiple HTML tags within a single div element

After extracting a value from an XML document using Javascript, I encountered a problem while attempting to generate multiple image tags based on that value. Despite my attempt with a for loop, only one image was being displayed. for(i=0; i<red; i++){ ...

Properly nested anchor elements with semantic meaning

I'm currently working on a web application where we are implementing inline editing. To illustrate the issue I'm trying to address, let's use the example of a Facebook post. For instance: Jennifer Lopez shared a new video The name "Jennif ...

CSS showcase of a minimalist image gallery

I have designed a simple image gallery using the following CSS: .product_container { width:100%; display:block; } .product_images { width:45%; display:inline-block; border:1px solid black; } .product_images .large { } .product_images ...

Bootstrap glyphicon not in sync with input field alignment

Having an issue with aligning the upper border of a search input field when using Angular with Bootstrap and adding a glyphicon next to it. div.input-group(ng-show='feeds.length > 0') span.input-group-addon.glyphicon.glyphicon-search in ...

Unable to eliminate the default styling of Material UI table using an external CSS file

Currently, I am incorporating a Material Ui table into my project. My goal is to eliminate the border and adjust the padding of the table. Upon investigation, I came across a default className for material ui table known as MuiTableCell-root-40. Below is t ...

The title attribute fails to display the entirety of the content

My div has a title attribute with 4000 characters, but when I hover over it, the full content is not displayed. Is there a way to show the complete text? https://codesandbox.io/s/strange-hugle-mvwu5 ...

How to add a background image in CSS with HTML's help

I am a beginner learning HTML and CSS, attempting to incorporate a Full Screen Background Image using CSS. Unfortunately, the code I have written is not working as expected despite following various tutorials. Below is my code: HTML file <!DOCTYPE htm ...

Shifting an image to the corner using HTML and CSS

As I work on designing a coming soon page, my goal is to have the voter's hand extend all the way to the edge of the screen by cutting off parts of the sleeve. Can you provide some guidance on what modifications are needed in the css/html code for thi ...