put this code in your theme’s Custom CSS if it is available or go to Appearance > Editor > style.css to change your logo zoom.
you can see style.css at right side under the Templates.
.kad-standard-logo { height: 80px;}
Thread Starter
snp_85
(@snp_85)
shouldn’t be something like .kad-mobile-logo { height: 80px;} ?
want it zoomed only for a mobile version
@media only screen and (min-width: 471px) and (max-width: 590px) {
.kad-standard-logo { height: 80px;}
}
@media only screen and (min-width: 320px) and (max-width: 470px) {
.kad-standard-logo { height: 80px;}
}
Because it’s 1280px wide I would suggest using the retina logo area to add a logo just for mobile (not so wide), then you can use this css to make it appear only on mobile.
body #kad-banner #logo .kad-standard-logo {
display: block;
}
body #kad-banner #logo .kad-retina-logo {
display: none;
}
@media (max-width: 767px) {
body #kad-banner #logo .kad-standard-logo {
display: none;
}
body #kad-banner #logo .kad-retina-logo {
display: block;
}
}
Kadence Themes
Thread Starter
snp_85
(@snp_85)
Nothing worked for me.
I did resize double the logo, uploaded as retina logo. Added these css, but still the same.
If you chek the minimum size, like for iphone6, you’ll see the very very little logo, it couldnt ever seen.
Hey,
I’m suggesting that you not make the “retina” logo the retina image. I’m suggesting you upload an image that is different from what you have uploaded for desktop.
An image that is smaller in width so it doesn’t have to shrink so much to fit the screen.
Then the css above will make it switch to that mobile specific image.
Kadence Themes
Thread Starter
snp_85
(@snp_85)
Can you tell me please where I did wrong?
1.Kept the original 1280 wide image for a desktop.
2.Resized the image to 700 px in width, uploaded as retina logo.
3.Paste these css.
I understand that I need not so wide image for not shrink so much, so I did that when I resized, didn’t I?
ok, got it switch the code to this:
body .banner #logo .kad-standard-logo {
display: block;
}
body .banner #logo .kad-retina-logo {
display: none;
}
@media (max-width: 767px) {
body .banner #logo .kad-standard-logo {
display: none;
}
body .banner #logo .kad-retina-logo {
display: block;
}
}
Kadence Themes
