Updating the logo image on mobile devices using responsive CSS styling

My goal is to show a different image to users on mobile devices using only CSS, as I am unable to access the HTML code. On mobile, I used display:none for the header-logo-image img { and then added a background-url to the div to successfully display my alternative logo. The issue arises when I switch to the background image in the div because I lose the link to the homepage that my other img provided.

Is there a workaround to ensure that the background image can be linked? Would CSS image sprites work if applied to the img instead?

<div id="header-logo-image">
<a href="http://example.com/folder/">
<img src="http://example.com/folder/wp-content/uploads/2016/01/head-logo.png">

css

Answer №1

If you need to switch out logos for mobile devices, here's how you can do it:

HTML

<a class="navbar-brand" href="/"></a>

CSS

.navbar-brand {
    background: url(PATH_TO_IMG/mobile_logo.png);
    width:180px;
    height:55px;
    margin-left:10px;
}
@media only screen and (max-width:600px) {
    .navbar-brand {
        background: url(PATH_TO_IMG}/mobile_logo_small.png) no-repeat center;
        width:50px;
    }
}

See an example here

I hope this solution works for you!

Answer №2

Include this CSS code in your stylesheet

@media only screen and (max-width: 767px) {
  #logo {
    content: url("http://yourwebsite.com/mobile_logo.png");
  }
}

@media only screen and (min-width: 767px) {
  #logo {
    content: url("http://yourwebsite.com/large_logo.png");
  }
}

Answer №3

After some consideration, I decided to implement the following solution: 

@media only screen and (max-width:800px) {
.navbar-brand img { opacity: 0; }
.navbar-brand {
    background: url(PATH_TO_IMG}/logo_small.png) no-repeat center;
    width:200px;
}
}

This allowed me to retain the current logo CSS and file in place.

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 method for implementing right/left text ellipses on flexed buttons that span the entire viewport width using CSS?

I currently have the following code: .viewport { width: 300px; } .container { --color-dark: rgb(40, 40, 40); --color-light: rgb(255, 255, 255); --color-base-background: rgb(255, 255, 255); ... <div class="viewport"> <di ...

css

Formatting Text in CSS and HTML

I need help aligning three images horizontally with text underneath, using CSS. Despite trying multiple methods, the images remain vertically aligned and the text does not align properly with the images. #img_cont { display: table; width: 90%; ...

htmlcss

CSS Problem: The buttons beneath the div disappear when I apply a margin

Kindly click on the links below to view the images. The first image displays the desired design I am aiming for. The text and blue background are part of the image, and there is a button located below them. However, whenever I adjust the top margin, it ge ...

htmlcsswordpressbootstrap-4

Mastering the Art of jQuery: Easily Choosing and Concealing a Div Element

I'm currently facing challenges in removing a div upon successful AJAX completion. The issue I'm encountering is that the word "Added" appears twice after success, indicating that I am not properly selecting the two divs containing it. Any sugges ...

javascriptjqueryhtmlcss

The form submission messages that are being received are appearing blank, even when the name field is populated with an

Hey there! I'm experiencing an issue with my form. Even though I've set the name attribute to "" for all fields, the submitted data comes back blank in my email. Here's a snippet of my code: <div class="col-lg-6 ...

htmlcssemailform-submit

Problem arises when attempting to display a div after clicking on a hyperlink

I'm encountering an issue with displaying a div after clicking on a link. Upon clicking one of the links within the initial div, a new div is supposed to appear below it. All tests conducted in jsfiddle have shown successful results, but upon transf ...

jqueryhtmlcsstoggle

What is the best way to align these divs horizontally?

I am facing an issue with my web page layout. I have a list of topics that I need to display, with four topics in each row. However, when I try to render them, they end up aligning vertically instead of horizontally like this: This is the CSS code snippet ...

cssreactjs

Steps to insert a logo into a Bootstrap navbar

Hey there, I'm having trouble fitting my logo into a Bootstrap navbar. The issue is that the logo appears larger than the navbar itself, and I've tried various solutions without success. Can someone please assist me with this problem? Below is th ...

jqueryhtmlcssasp.nettwitter-bootstrap

Step-by-step guide on incorporating edit, update, and discard functionalities within an Angular Material table component (mat-table)

I am currently working on implementing edit, update, and discard functions in an angular material table. While I have been able to successfully edit and update the table row wise, I am struggling with how to discard table rows. If you would like to see wh ...

javascripthtmlcssangularangular-material

Scripting events in JavaScript/jQuery are failing to trigger on elements located inside nested <div> containers

I am currently developing a simple RSS reader application where, upon clicking a 'story', the relevant information is displayed in a modal view. The 'stories' or RSS feed items are presented in a scrolling row. However, I have encounte ...

javascriptjqueryhtmlruby-on-railscss

What is the best way to place text alongside a shape?

I'm attempting to place text beside the circular shape. HTML <div class="row"> <div class="col-sm-2"> <span><div class="circle"></div></span><p>available</p> </div> </div> C ...

htmlcsstwitter-bootstrap-3

Hide the border on a table with CSS

I recently installed a Wordpress Template and customized the table's background and text colors. However, I am struggling to remove the border around the table. Despite searching for solutions, my limited CSS knowledge has not led me to a fix that wor ...

htmlcsswordpress

What is the user-agent string for the Safari home screen?

Is there a unique user-agent string specifically for Safari on IOS that identifies it as being in "Home screen" or "app mode"? I've observed a bug on IOS8 where the browser window appears incorrectly, with the time and battery information overlapping ...

htmlioscsssafariuser-agent

Ways to modify the text of an HTML element when hovering over it

One of my elements contains the text &times; within a <span>. Is there a way to change this symbol to something else, like &infin;, when hovered over? <span class="change-text">&times;</span> When the mouse hovers over it, I ...

javascripthtmlcss

When I add text to div boxes, they begin to drift downward

After creating four div boxes with content, I encountered an issue. Initially, when inserting filler text, everything seemed fine. However, as soon as I started adding actual content into the first box, the other three boxes shifted downwards by the same a ...

htmlcss

What are some tips for incorporating vue.js into a basic web application?

I've been trying to incorporate vue.js into my web application, but for some reason, it's not loading and the HTML is not firing in the browser. Please take a look at the code snippet below: <!DOCTYPE html> <html> < ...

javascriptjqueryhtmlcssvue.js

What is the right height and width to use in CSS?

I find it challenging to decide when to use rem, em, px, or % in web design. Although I know the definitions of each unit, I struggle with knowing the appropriate situations to utilize them. What guidelines should I follow to determine which one to use? ...

htmlcssheightwidth

Is it true that document.execCommand only works with buttons and not links?

Below is the code snippet I am working with: <div contenteditable="true" style="height:100px;width:100px;border:1px solid; " class="editor"></div> <a class='bold' style="height:10px;width:10px;">B</a> $(function(){ ...

javascriptjquerycssrich-text-editor

Div I add to page is not being styled by CSS

I'm currently developing a Chrome extension that provides a preview of a webpage when hovering over a hyperlink to it. To achieve this, I am creating a div and filling it with different items. However, the issue I'm facing is that the CSS styles ...

htmlcssgoogle-chromegoogle-chrome-extensionstylesheet

Issue with Navbar Collapse Toggle not deactivating (following transition from bootstrap v4 beta to v4 alpha 6)

Recently, I encountered an issue with my navbar after switching to v4 alpha 6 in order to utilize the responsive utilities that this version offered. If you visit the following page: , you will see what I mean. Prior to upgrading to v4 alpha 6, all menu ...

jqueryhtmlcsstwitter-bootstrap