Mobile logo

Hi!

I've been searching on css and template options, but I can't find where to add a different logo for mobile versions.

I'm using the 'Image' type, but I think that if I want to use a second logo for mobile versions, I will have to use 'CSS' type, am I right?

Well, if I'm going to use @media queries, where do I have to put them? If I put them in override.css, will I be able to manage both logos from there?

Is there another way to do that?

Thank you guys!

Placing media queries in override.css, specially if You would like to use different logo for mobile version is best option available.
Also logo type must be set to css type so You can change it with override.css.

Thanks! It works great. If someone wants to know, after setting logo to css type, place this code in override.css:

Code: Select all

#gkLogo.cssLogo {
  background: transparent url('../[path]/logo.png') no-repeat 0 0;
  height: 137px;
  width: 254px;
}

@media all and (max-width: 580px) {
    #gkLogo.cssLogo {
    background: transparent url('../[path]/mobile_logo.png') no-repeat 0 0;
    height: 65px;
    width: 120px;
  }
}

Of course, change height and width to fit your logo.

Regarding mobile adaptations, in the home page, those thumbnails are smaller in the mobile version, but the text just disappears when thumbnails are too small. Where can I adapt the text size?

Thanks!

Could You please post an url to your site?

It doesn't mind. I've changed module mode from News Blocks to Product Gallery 2 (which have some labels without legible text, btw...).

This module mode adapts much better to resizing

Thanks!

I'm glad You could resolve it on your own.
If You will have any other questions, feel free to create new threads.