the header doesn't resize properly on mobile

[realokun]

Here is a screenshot from 8″ tablet. The menu should line up with the logo.

Attachments:

You must be logged in to view attached files.

[Kamal]

Hi,
Would you please give me the link to your website to check it?
Thanks,
Kamal.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[realokun]

Oh, here is the link: http://www.spokescommute.com/

Thanks,

-Victor

[Kamal]

Hi Victor,
Thank you very much for your patience and giving me the link to test. I have just tested and found the problem from the viewport size 441px to 470px wide. I could solve the problem in my test using the following code. Please put the following code

COPY CODE

@media screen and (min-width: 441px) { 
   .logo, .logo a {
    width: 88% !important;
}
}

to Appearance>Editor>style.css or Theme Option>general settings>quick css and the save the file.
Please refresh the page and it should work fine now. If you test with your browser window then please try to clear all cache and cookies etc from the browser to test properly. If you have any problem to understand anything, please ask me anytime.
Thanks,
Kamal

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[realokun]

Thank you Kamal, it did the trick!

-Victor

[realokun]

Ooops, though the tablet view got fixed, the desktop view is now broken. The logo is now smaller in size. Rolling back.

[Kamal]

Hello Victor,
It did work on my test. By the way, You can try with the following code. Replace the above code with the following code. This code should work fine.

COPY CODE

@media all and (max-width: 470px) and (min-width: 441px){
      .logo, .logo a {
    width: 88% !important;
}

}

Thanks,
Kamal

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[realokun]

Kamal,

Here is what it looks like in Chrome with and without your last CSS. As you can see, the title does get shrunk.

Cheers,

-Victor

Attachments:

You must be logged in to view attached files.

[realokun]

I left your CSS code deployed, check for yourself on desktop Chrome: http://www.spokescommute.com/

[Kamal]

Hello Victor,
Did you mean the size of the logo shrink by saying the tile shrunk? If responsive problem is solved then I can solve the logo size problem too. Please tell me clearly about your present problem. Thanks,

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[realokun]

Hi Kamal,

Sorry, I meant the logo of course. Lemme try again though:

1. The original problem was that on the 8″ tablet, the logo was not lining up with the mobile-style menu.
2. You have provided the CSS that has solved the problem on the tablet, but affected the logo on the desktop browser: it now appears smaller than the original size.

Incidentally, I have submitted another ticket, also related to the header area, perhaps you can fix them both in one shot: https://archived.seventhqueen.com/forums/topic/inconsistent-header-height

So far, the header area gives me the most grief on KLEO template.

Thank you,

-Victor

[Kamal]

Hi Victor,
Sorry for late reply.
I can see that your logo problem and header problem is solved from your another ticket here
I have just tested your site and found it is working fine. If you have the problem still please let me know.
Thanks,
Kamal

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[realokun]

It works great now! Thank you Kamal!

-Victor

[Author]

Posts