wordpress website experiencing a logo consistency issue on mobile devices

Issue with displaying custom logo on mobile devices persists even after updating theme options. Since the default logo continues to appear, the next step is to locate the default logo in the theme coding and replace it with the desired custom logo specifically for mobile devices. Are there any suggestions or alternative methods to resolve this?

An attempt was made to hide the default logo and implement the custom logo for mobile devices using the following code:

@media (max-width: 480px) {
    .site-title a {
        background: transparent url("http://logo.png") no-repeat scroll 0 0 !important;
        overflow: auto;
    }
}

@media (min-width: 480px) and (max-width: 768px) {
    .site-title a {
        background: transparent url("http://logo.png") no-repeat scroll 0 0 !important;
        display: block;
    }
}

Despite efforts, the code above did not yield the desired outcome. The custom logo functions properly on desktop devices but encounters issues specifically on Android devices.

Answer №1

Managing a Wordpress website can be challenging at times. To ensure your website is up-to-date, consider clearing the cache regularly. If you are utilizing Wordpress along with page builders, such as Elementor, you have the flexibility to customize the header using the Elementor Theme Builder. From the Responsive tab, you can easily adjust what content is displayed on mobile versus desktop.

Answer №2

Give this a shot:

 @media (max-width: 480px) {
        .site-logo  {
            background: transparent url("http://logo.png") no-repeat scroll 0 0 !important;
        background-size: cover;
          padding: 0px;
          margin: 0px;
          width: 150px;
          height: 50px;
        }
    .site-logo img
    {
    display:none;
    }
    }

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

Removing all HTML elements within the div container

My HTML code includes the following: <div class="row" id="conditional-one"> <div class="large-12 columns"> <h3><?php echo $arrayStage_rule_one_title?></h3> <p> <?php echo $arrayS ...

Using a variety of different font styles within a single sentence

I'm looking to add a title with text in one of my divs, but I want the title to be in 3 different font sizes. Any suggestions on how to achieve this without starting a new paragraph for each size change? Here's an example of what I'm trying ...

What are the steps for utilizing the latest Saved State Module in the ViewModel?

I am currently using lifecycle version 2.2.0-rc03 and have been struggling with the resources provided in the official documentation and articles. They do not seem to list the correct class name or constructor arguments. I believe I need to obtain the View ...

Transforming an array list object into a JSON array

I am dealing with an ArrayList that I need to convert to a JSON array in order to send it to the server. The required JSON format is as follows: { p:1, s:["a":1,"b":2],["a":2,"b":3],["a":3,"b":4] } Assuming I have the following: List<MyObject& ...

Adjusting the ng-bootstrap carousel to fit within a div inside an ng-bootstrap modal

I have been struggling to correctly adjust the CSS properties in order to make a ng-bootstrap carousel image fit into a specific space (div) within a custom ng-bootstrap modal. Take a look at this modified StackBlitz code. In the provided example, the ima ...

Possible rewrite: "Unable to use jQuery to add elements to data fetched through AJAX requests."

I am looking to add a button to copy code inside every div that has a class starting with language. The code is functioning properly, however, after attempting to retrieve data from the database using Ajax, the button no longer appears in the div as it did ...

The background image on my CSS is not showing up

I just added the file to my git repository and shared the link here. Is there a specific way to do this? html{ background-image:url("https://github.com/vindhya97/images/blob/master/pinkbackground.jpg"); } ...

The HTML output is essential for creating the content of a Bootstrap carousel

Is there a way to populate my bootstrap carousel with the content of an HTML page instead of images? I attempted to create a div and use CSS to load the contents from ac1_div using content:url(carousel_content.html), but it was unsuccessful. <!-- our ...

Acknowledge that a checkbox was found to be unchecked while editing a php/html form

Currently, I am in the process of developing a form using PHP/HTML that enables users to input data, review, and potentially edit their inputs before final submission. One of the key elements within this form is the use of checkboxes. Thanks to resources l ...

Tips for preventing a div from overflowing in col-md-12 in Bootstrap 3

Is there a way to maintain the same width for the image and div below? Everything looks good until the window size is between 545px to 575px. The .header width changes only at col-md-12. How can I preserve the aspect ratio? VIEW SCREENSHOT CODEPEN LINK ...

Tips for scrolling content within a flex row that has a flex-grow-1 property

I am working on a Bootstrap layout where there are 3 rows wrapped in a flex column. Here is how it looks: <div class="row" style="height:100vh;"> <div class="col d-flex flex-column"> <div class="row">...</div> <div c ...

Maintain the horizontal alignment of CSS floats

What causes the div on the right to float higher than the two divs on the left? How can I ensure they are all aligned at the top? HTML <header> <div class="nav" style="width:100%;border:#900 thin solid;"> <ul id='nav-left' ...

Angular 4's Panel Window: A User-Friendly Interface

Having experience with Adobe Flex, I am familiar with creating new panel windows in Action Script by using the 'new' keyword and popping them up using popups. The customization of these windows was achieved through functions provided in the Panel ...

What is causing my link to be clickable beyond the designated linked text area?

https://i.sstatic.net/RZPaw.png Displayed above is the current image. By clicking anywhere inside the black border, you will be directed to the provided URL. However, I specifically want only the text "RANKINGS" to be clickable. Here is the HTML code: &l ...

Creating a music blending feature in an Android application programmatically

Looking to develop a unique audio mixing app that allows users to create DJ music tracks by blending different elements of a song. Users can select a music track and mix it with various rhythm, bass, or beat tracks to produce a new and customized DJ music. ...

``There seems to be an issue with setting the input value attribute using jQuery's .html

I've been trying to update the value attribute in the input element within my HTML code, but so far, I haven't had any luck with it. HTML: <div class='photo-info'> Photo Name : <span class='photo-name'><?p ...

Employing jQuery to add an element as a sibling rather than a child node

I'm having trouble finding the specific functionality I need. My goal is to add sibling DOM elements to a disconnected node. From what I gather, it should be possible with either .after() or .add(), but for some reason both methods are not working as ...

Refine the search outcomes by specifying a group criteria

I have a scenario where I need to filter out service users from the search list if they are already part of a group in another table. There are two tables that come into play - 'group-user' which contains groupId and serviceUserId, and 'gro ...

Creating a task management system using HTML, CSS, and JavaScript that utilizes local

I have been extensively researching how to create a to-do list using JavaScript with local storage, but unfortunately, I have not been able to find exactly what I am looking for. Is there a way for me to set up a to-do list and input data before actually ...

What is the process for adding a box shadow beneath my header?

I am currently attempting to add a box shadow under my header, similar to the design featured in the project mockup at https://github.com/RaghavMangrola/the-brighton-times. After trying to implement the following CSS property and value: .header { ...