TotalWpOptimization.net
I have changed the header logo with my own and it keeps the same size no matter which device I use. It doesn't shrink to fit pads & phones.
Which Search Console is annoyed about :-)
You need to clear your mobile browser cache
or try adding this to your global.css #logo with the below responsive image css style
#logo img {
width: 100%;
height: auto;
}
As Michael suggested, clear you browser cache. In regards to logo img, I don't agree on the above code.
You need to use media query otherwise the logo will blur on bigger screen because of 100%.
using mobile first schematics, define 100% width for mobile devices and a fixed width for logo for bigger screen.
Another option is to use seperate logo for different devices.
I tried this:
@media only screen and (max-width: 1280px) {
#logo img {
width: 100%;
height: auto;
}
}
But it seems like the menu icons right below the header logo is affected by using this selector. So they change size too. I can't spot a unique selector for the logo.
Maybe with :
@media only screen and (max-width: 1280px) {
#logo img:first-child {
width: 100%;
height: auto;
}
}
(2020-07-16, 11:19 AM)WallBB Wrote: [ -> ]As Michael suggested, clear you browser cache. In regards to logo img, I don't agree on the above code.
You need to use media query otherwise the logo will blur on bigger screen because of 100%.
using mobile first schematics, define 100% width for mobile devices and a fixed width for logo for bigger screen.
Another option is to use seperate logo for different devices.
Man, you do things so well, in sophisticated ways, that I have to appreciate your totally thorough explaination.
Let me correct my suggestion to fix the blur effect.
to scale down if it has to, but never scale up to be larger than its original size, use max-width: 100%:
.responsive {
max-width: 100%;
height: auto;
}
but like you said, having different inages for different devices may look better.