Changed top logo and site no longer works on mobile device

[Richard Clayton]

Hi

I changed the default top logo for my logo and made it slightly larger.
I also have a smaller version of the logo (the same width as the default logo@x2.

However on a mobile device it correctly uses the smaller logo but it enlarges it to the full width of the screen causing the client login button to render below the green bad and over half the owl slider.

I haven’t changed any of the html, only uploaded my versions of the logo using original names.

Thanks

[ThemeLooks Support Team]

Hi Richard,

First of all, we have provided support logo@2x for retina display only. That means, the logo@2x will show in the retina display only, will not show in the mobile device.

In this issue, you have to use the same size logo for both logos & logo@2x. However, you could increase the resolution (not size) of logo@2x to get a clear view on retina display.

Moreover, if you want to use a big logo, then you must have to write and use custom CSS to get fit the logo on header for both desktop and responsive view.

Furthermore, please extend your support extension to get further support in the future. This is because, your 6 months FREE support was expired on 2018-02-11.

Best Regards,
ThemeLooks Support Team

[Richard Clayton]

Funnily enough the logo@2x image is displayed on my Android phone but that does not help my issue.

The new logo is 383 x 137px and on mobile devices it takes the full screen width pushing the client button down over the right quarter of the owl carousel.

I have tried a few pieces of custom css but nothing appears to change the width of the top logo on a mobile device.

Thanks

[ThemeLooks Support Team]

Please extend your support extension to get support. This is because, your 6 months FREE support was expired on 2018-02-11.

Best Regards,
ThemeLooks Support Team

[Richard Clayton]

Hi.
I already renewed my support on the 16th Feb The invoice number is IVIP23748476

The URL for the website with the logo image issue is https://goo.gl/e6RbHs

Thanks

[ThemeLooks Support Team]

You have used too much big logo. That’s why, the issue raised.

However, you could add the below CSS to the custom.css file to fix the responsive issue:

@media (max-width: 767px) {
    .header--topbar {
        height: auto !important;
    }
    .header--topbar-logo {
        float: left;
        display: block;
    }
    .header--topbar-logo img {
        max-width: 150px;
    }
  
    .header--topbar-info {
        margin: 30px 0;
    }
}

Best Regards,
ThemeLooks Support Team

[Richard Clayton]

Hi

That is very similar to the custom css code I had already tried and doesn’t fix the issue.
The code is in place on the site and you can see the problem still exists.
The logo is responsive down to a screen width of 535px, anything below that and the client button jumps down and cuts off the owl carousel.

Thanks

[ThemeLooks Support Team]

We have seen that, you have used two more CSS without closing the CSS in the custom.css file. That’s why, our provided CSS doesn’t work. So, please close your previous CSS using } to fix the issue.

Moreover, this is all about customizing the template and customization service doesn’t include item support. In this issue, you need to hire someone else to customize the template based on your needs and requirements, if you are unable to customize the template with your own.

Please check out below what our item Support includes:
– Answering technical questions about item’s features
– Assistance with reported bugs and issues
– Help with included 3rd party assets

Furthermore, please learn more our support policy (item support includes & not includes), here https://www.themelooks.com/support/support-policy/

Best Regards,
ThemeLooks Support Team

[Richard Clayton]

Sorry, I must have deleted the previous closing tag when I pasted your code it.

However that hasn’t made any difference.
To me this is a bug in the template, if you can only use the size of logo in the default template.

The logo image is responsive and reduces size as the screen size reduces.
The issue happens as soon as the logo and the client button cannot fit on the top line with the logo full size. As soon as the logo and client button stack then the logo size will change responsively.

Thanks

[ThemeLooks Support Team]

Please close the very first CSS too. Check out the screenshot as reference http://prntscr.com/igswcr

Moreover, it’s not logical that you are talking about the logo like the logo size will change responsively. Based on your logic, if you will use a normal (not extra large) logo, then no one will find the logo in the responsive devices. This is because, the logo size will change responsively. However, if you have any reference about your logic, then please send us to learn more.

Best Regards,
ThemeLooks Support Team

[Richard Clayton]

Ok I understand now. I was sure I added that missing closing bracket.

Thank you very much for your support

[Author]

Posts