Display different logo on mobile than desktop using a child theme

Question

I need a different logo on mobile than I do on desktop for this website: https://www.lovelilbucks.com/

I made the Wordpress site using Uncode Theme/Visual Composer so you actually just enter the logo in Theme Options instead of code it in yourself.

I made a child theme for a few other reasons, but I've never edited HTML via a child theme and wanted to ask if anyone knew what file here.

I was looking at this question Display a different logo on mobile and desktop? and might try the first answer (seems legit) but nervous on what file I edit in child theme. I believe this is the HTML I need to edit (if you use inspect)

<div class="logo-image logo-skinnable" data-maxheight="180" style="height: 180px;"><img src="https://www.lovelilbucks.com/wp-content/uploads/2017/11/lil-bucks-website-logo-uai-258x180.png" alt="logo" width="258" height="180" class="img-responsive"></div>

Any experience knowing what to edit? Is this mostly css or html based, or both?

Thanks

Facundo Corradini · Answer 1 · 2018-01-23T15:56:49.290

1

Replace your img tag for a picture one, so you can set breakpoints at which the browser should download and display one image or the other

<picture>
  <source media="(min-width: 650px)" srcset="big-logo.jpg">
  <source media="(min-width: 465px)" srcset="not-so-big-logo.jpg">
  <img src="default-logo" alt="logo" style="width:auto;">
</picture>

Alternatevely, you can use srset on your image tags.

Read about responsive images: https://developer.mozilla.org/es/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

edited Jan 23 '18 at 15:56

answered Jan 23 '18 at 15:44

Facundo Corradini

3,825
9
24

I suggest using max-width and setting the default logo as the desktop version as IE doesn't recognise `picture` and will only show the small logo. – Richard Parnaby-King Jan 23 '18 at 15:53
Or - use a plugin to make IE behave like a proper browser. – Richard Parnaby-King Jan 23 '18 at 15:54
@RichardParnaby-King yup, you're right on that one. I'll edit my response – Facundo Corradini Jan 23 '18 at 15:56
1

@FacundoCorradini Thanks for the thoughful response + edit. I'm going to try this in the evening and will let you guys know if it worked! – Emigriff Jan 24 '18 at 17:10

score 0 · Answer 2 · answered Jan 23 '18 at 16:11

0

For html5 compliant browsers, @FacundoCorradini 's approach is correct. For older browser support, you may need to use a sprite approach:

.logo {
 background: url(https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be) no-repeat scroll 0 0 transparent;
 width: 190px;
 height:50px;
}
@media (max-width: 650px) {
  .logo {
    background-position: 0 -500px;
    width: 150px;
    height: 30px;
  }
}
@media (max-width: 400px) {
  .logo {
    width: 28px;
  }
}

<div class="logo"></div>

answered Jan 23 '18 at 16:11

Richard Parnaby-King

14,703
11
69
129

good alternate approach. But on the picture tag method, those browsers that don't support the picture srcsets will simple show the img, that's why it's there in the first place. That pretty much means IE will show the img while the others will adapt accordingly to the picture srcsets, wouldn't it? Maybe Opera Mini is a concern? (not trying to argue, just clarify) – Facundo Corradini Jan 23 '18 at 18:20

Display different logo on mobile than desktop using a child theme

2 Answers2