Problems with logo size after update to 7 – Header Style 10

Hi guys,

we’re having some issues with the size of our logo since we’ve updated from 6.6.3 to 7.1.1. We’re currently updating the theme in our development environment.

We’re using header style 10, but want to use the small version of the logo. As advised in the documentation, I’ve added .td-logo { width: 130px; } in Custom CSS , which is the width I would like it to be. This worked perfectly fine with 6.6.3.

This is the logo how it is supposed to be: https://www.22places.de (version 6.6.3)

This is the logo after the theme update to 7.1.1: https://spielwiese.22places.de

In 7.1.1. this line has the effect that the logo (only on the home page) is aligned to the left. When I delete the line from my Custom CSS, the logo is centered as it is supposed to be. However it still shows the bigger version (retina) of the logo.

If the line .td-logo { width: XXpx; } you’ve advised in the documentation does not do the trick, what does?

Hope you can help me out!

Thanks

Jenny

Hi Bogdan,

Thanks for your quick reply. We’ve tried with different laptops + web browser, and for us it always looks like this: http://www.screencast.com/t/zJFYGsfet

We would like it to always show the smaller version of the logo (irrespective of retina display or not).

What could be the problem? Thanks again, Jenny

Hi Bogdan,

we cleared the cache and tested it on different devices (all kinds of laptops and browsers of people who’ve never been to those websites). We’re 100 % sure, that it’s not a caching problem.

We are using header style 10 – which is supposed to show the bigger version of the logo on all displays, but want it to show the smaller version (width: 130px) on retina displays. This is why we’ve followed the instructions in your documentation for header style 10 (https://forum.tagdiv.com/logo-favicon/) and added the line .td-logo { width: 130px; } to the custom CSS. This line is doing what it’s supposed to do with newspaper version 6.7, but after updating the theme to 7 it does the following: change the logo width to 130px on the home page ONLY and moves it to the left side of the page. On all other sides of the page, it still shows the bigger version on retina displays. Here you can see how it looks on a retina screen: http://www.screencast.com/t/zbk526pSwXBf.

So the problem here is, that we are using retina displays. Retina displays show the bigger version of the logo – non retina display (which you probably have) show the smaller version of the logo. I assume that you have a non-retina display as this is why you only see the correct version or let’s say the non-retina size of the logo.

So the question is: What do we have to do to display the logo with the width of 130px on retina screens.

Best regards
Jenny

Hi Bogdan,

Thanks for your help and your patience. The line works for the home page, but not for the other pages. Any suggestions? What could be the reason for the home page to react differently to the other ones, which still show the retina version of the logo?

I’ve now added this line:

.td-header-style-10 .td-header-sp-logo img {
width:130px!important;
}

Not sure if that’s an elegant solution and I do not understand why the other line doesn’t work for us. Thanks for your help though!

Jenny

Perfect! Thanks for your help!