How to display a different logo on mobile and desktop?
2Answer
If you want to show different logo on different divice(like mobile and desktop) You can use a media query and selectively show/hide elements. Your html would have both logos in the markup, and your CSS would define which logo is shown depending on screen size.
Example is given below:
<style>
/* hide mobile version by default */
.logo .mobile {
display: none;
}
/* when screen is less than 600px wide
show mobile version and hide desktop */
@media (max-width: 600px) {
.logo .mobile {
display: block;
}
.logo .desktop {
display: none;
}
}
</style>
<div class="logo_div">
<img src="/images/logo_desktop.png" class="desktop" />
<img src="/images/logo_mobile.png" class="mobile />
</div>
- answered 6 years ago
- Community wiki
Chrome and navigate to the Google homepage. Click on the Custom Logo icon at the top of the browser. From the drop-down menu, enter the custom text and choose an image
- answered 2 years ago
- Abha Sharma
Your Answer