-
AuthorPosts
-
September 1, 2018 at 1:53 pm #1004359
Hi.
Thank you for your super theme, it’s awesome!
I have a little problem with the logo in the up side of the web of my blog, it’s nice on desktop but blurry in mobile devices.
I have tried with different sizes but I can’t solve it.Could you help me please?
Thank you.
September 2, 2018 at 4:15 am #1004530Hey VM,
The font is very thin and the blur is expected if the size changes.
Please convert the png to svg and upload an svg logo in your theme options.
Best regards,
VinaySeptember 2, 2018 at 9:52 pm #1004720Thank you but it’s not working.
Image is bad converted.September 3, 2018 at 6:43 am #1004784Hi,
Thank you for getting back to us. I check the example yes it is not rendered correctly, please convert the image to svg using any other software and replace the png logo to fix the blur issue on the mobile phone.
Best regards,
VinaySeptember 3, 2018 at 12:17 pm #1004911Thank you.
I have done it and in mobile devices is perfect, but now is blurry in desktop devices.
Could you help me please?
Thank you again for your help.
September 3, 2018 at 12:55 pm #1004920Hello VM,
we don’t see the link, anyway – usually I use logo double size.
If I set header 70px height then my logo has image height 140px and it is sharp everywhere.If I have logo made only from text, then I am not using image, but text only over this code in function.php:
add_filter('avf_logo_final_output', 'avf_text_logo_final_output'); function avf_text_logo_final_output($logo){$link = apply_filters('avf_logo_link', home_url('/')); $logotext = "Company Name"; $slogan = "This is some nice slogan below"; $subtext = ""; $subtext = "<span class='yourcssformatting'>$subtext</span>"; $logotext = "<span class='yourcssfirstword'>$logotext</span>"; $slogan = "<span class='yourcssslogan'>$slogan</span>"; $logo = "<h6 class='logo bg-logo'><a title='Text appear when mouse hover' href='".$link."'>".$logotext."$subtext<br/>$slogan</a></h6>";return $logo ;}
Please note you can change h6 to h1 or h2, what will fit your SEO needs.
Anyway, you can have some “fun” with setting CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
Also keep in mind that internet browsers are rendering images differently: chrome, firefox, ie. It is driving me crazy sometime :)Best wishes,
Milan- This reply was modified 6 years, 3 months ago by Milan.
September 3, 2018 at 1:13 pm #1004929Thank you, but the logo is a image with an icon, I can’t put on text.
If I put a small logo, then is blurry on mobile devices, and if I put a larger one then is blurry on desktop devices.Link is on ht first message, I add it again.
You can convert to SVG here: https://convertio.co/es/png-svg/
Thank you for your help.
September 3, 2018 at 2:56 pm #1004993Hi VM,
Could you please clear the cache, check again and get back to us.
Best regards,
VictoriaSeptember 3, 2018 at 9:33 pm #1005163I have done it and still be blurry.
Thank you.September 4, 2018 at 9:11 am #1005328Hi,
Please add the below code to Quick CSS. This will disable the svg logo on the desktop and display a png logo.
@media only screen and (min-width:767px) { .logo a img { display: none; } .logo a { background: url('https://victormorales.net/wp-content/uploads/2018/08/logo.png') no-repeat; background-size: cover; width: 260px; height:50px; position: relative; top: 50%; left: 0; transform: translateY(-50%); } } @media only screen and (min-width:990px) { .logo { margin-top:20px; }}
Best regards,
Vinay -
AuthorPosts
- You must be logged in to reply to this topic.