I’d have to see it live to know what is happening, but the logo should scale as the browser window changes. If you cannot provide a live link, perhaps a link to your logo so I can download it and try it on my test site? If so, also let me know what your header setup is:
– with title
– without title (just the logo)
– header style (centered?)
Hopefully this will all work—
Here is the path to the logo.
This is a link to a screenshot of what my phone is showing. You can see how large the logo is compared to the banner and how the bullets and navigation links are sticking to it’s right edge.
I have the header set to show the logo only.
thank you!
Ah…that screenshot of your phone helps a lot.
First thing, your menu is using the default menu that automatically adds pages. It’s recommended to create a custom menu for your primary menu so that you get the full styling and mobile menu to show. This will remove the menu you see with the bullets.
Regarding logo scaling, it won’t scale because it’s too small and the window space still provides room for it, where only at the point when the area the logo is in gets smaller than the logo, the logo will scale down to fit. This is how responsive images work…they only downsize when the container they are in gets smaller than itself.
There is a way to make the logo smaller without that functionality, by doing some custom CSS to force the logo to be smaller at certain mobile viewing.
I’d try creating your custom menu first, then view it on your phone and see how the logo looks after.
That’s better, but the logo is still an issue. This is how it looks now. The logo is so large in proportion to the other elements that it is taking attention away from more important content. I don’t really want to make it larger (or not too much larger) than it already is for desktop.
How much larger would it need to be to trigger the scaling for mobile——and would that result in anything smaller than what is already showing? I am suspecting that CSS may be the better way to go. Can you make some suggestions to get me started?
thank you!
Thanks for the screenshot again… but what is happening should not be happening. I even tried this on my local test site with your logo and the menu floats below.
Did you make any kind of custom changes to the theme?
As for forcing a smaller logo, you can add something like this to a custom stylesheet:
@media (min-width: 320px) and (max-width: 768px) {
#logo {
width: 75px;
}
}
What that does is scale your logo image to just 75px in width between screen sizes of 320px and 768px. You can of course modify these attributes to your needs.
I wanted to find out what version is your Longevity?
What phone are you using, and what browser?
sigh.
I was using Longevity 1.2.7, but when you asked about this I discovered there was an update. Now it is 1.2.8 and it’s really different — and I liked it better before! Now the logo is centered at the top with the menu bar below it, then the banner below that. I think it was much better with the menu to the right of the logo.
In answer to your other questions, no, I haven’t made any custom changes to the theme. My phone is an LG-LG870 using Firefox.
Is there any way the menu can go back up to the right of the logo?
I added the CSS for the logo size. Now the proportions are better. That part is an improvement. thanks
Actually, even prior versions when in mobile view, the logo or site title floats above and the menu is below (both centered). That is why I Was curious why yours was side-by-side when I saw your screenshot.
As for getting your logo and menu side-by-side, plus to recode sizing and styles would take a more complex undertaking.
Is it more about limiting the spacing around the top header in phone viewing?
Yes, it is more efficient and the content gets seen more easily. Now I understand why the navigation was in a stripe instead of the little box of lines indicating a menu.
I don’t think this is a factor, but the reason you can’t see this dev site is because it was generated by a plugin called WP-Staging. Instead of a separate dev site, in the file manager it shows up next to the wp-content directory within this site. That is the only thing that is different about my setup.
Thanks for the help. Since the logo scaling issue is solved I’m going to declare this one resolved.
I’m not concerned in the mobile view, I just want to make my logo bigger. Can anyone help me?
Hi Turk10000 The forum moderators will probably catch this, but it’s best you start a new topic for your support request as this one is already set as resolved. Repost as a new topic and I will be happy to follow up with you there. Thanks.
